javascript - 如何定位嵌套并包含在父 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 坐标不起作用。也试过翻译，但没有用。我想以 cm 为单位给出值(我不知道该怎么做)，但以 px 为单位的值也不起作用。有没有一种方法可以相对于彼此定位 svgs？或者如果不可能，我该如何手动翻译或定位它？ 代码在sniplet中，请查看

Answer 1

您可以使用 x和 y嵌套位置的属性 <svg>元素。例如:

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

在下面的示例中，我使用了这种方法来定位 body 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。