如何定位嵌套并包含在父 SVG 中的 SVG

Question

<svg width="33.5cm" height="57.5cm" style="border:1px solid black;">
		<svg width="31.8cm" height="54cm" x="1cm" y="2cm" style="border:1px solid black;">
			<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
			
			<!-- Header -->
			<svg width="100%" height="5.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				<!-- Logo -->
				<svg width="23.6cm" height="100%">
					<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				</svg>
			</svg>
			
			<!-- body -->
			<svg width="100%" height="20.6cm" transform="translate(0cm,5.8cm)">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:3; fill:none;"/>
				
			</svg>
			
			<!-- Ad -->
			<svg width="100%" height="26.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
			</svg>
		</svg>
	</svg>

我正在 HTML 中处理 SVG，并在网页中添加了一些嵌套的 SVG。 如何定位父 SVG 中存在的子 SVG 内容？ X 和 Y 坐标不起作用。 并且还尝试了翻译，但它不起作用。我想以厘米为单位给出值(我不知道该怎么做(，但 px 中的值也不起作用。有没有办法将 SVG 相对于彼此定位？或者如果不可能，如何手动翻译或定位？代码在截图，请检查一下

Answer 1

可以使用x和y属性来定位嵌套的<svg>元素。 例如：

<!-- body -->
<svg width="100%" height="20.6cm" x="0" y="5.8cm">

在下面的示例中，我使用此方法定位正文 svg。 我也把它弄成红色，所以很明显它是哪一个。

<svg width="33.5cm" height="57.5cm" style="border:1px solid black;">
		<svg width="31.8cm" height="54cm" x="1cm" y="2cm" style="border:1px solid black;">
			<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
			
			<!-- Header -->
			<svg width="100%" height="5.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				<!-- Logo -->
				<svg width="23.6cm" height="100%">
					<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				</svg>
			</svg>
			
			<!-- body -->
			<svg width="100%" height="20.6cm" x="0" y="5.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:3; fill:red;"/>
				
			</svg>
			
			<!-- Ad -->
			<svg width="100%" height="26.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
			</svg>
		</svg>
	</svg>

注意 请注意，SVG 单位中的"cm"几乎肯定不会与实际的 cm 相对应 - 例如在屏幕上或打印上。 像"cm"和"in"这样的SVG单位基于每英寸96个CSS像素的标准CSS DPI。 不会尝试匹配正在渲染 SVG 的设备的真实 DPI。