javascript - 如何为 `<g id="child">` element under ` <svg id ="parent">` 获取转换属性的元素设置静态 SVG 大小

Question

主要问题:

有没有办法在 <g> 上设置静态宽度和高度？元素，这样它们就不会受到在其父 View 框上完成的转换属性的影响 <svg>元素？

即

<svg id="viewbox" transform="translate(1,5)scale(2)"> // continuously gets the transform attr via js upon zoom event <g> <path "the shape of a triangle"/> <path same/> <path same/> <path same/> <path same/> </g> </svg>

我想要 <g> 下的所有内容根据 <svg> 的缩放事件变换值进行翻译的元素 View 框接收但不缩放 <g> 的尺寸元素。这样看起来屏幕正在放大到 View 框的一部分，但没有 <g>元素改变维度。

Answer 1

不是直接对 svg 元素标签 (svg) 应用转换，您可以使用组标签 (g) 来转换所有内容和矩形标签 (rect) 以仅缩放您的“viewbox”。

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(1, 5)">
        <rect 
            id="viewbox"
            fill="black"
            width="100"
            height="100"
            transform="scale(2)" />
        <!-- your elements down here -->   
        <rect
            fill="grey"
            width="20"
            height="20"
            x="10"
            y="10" />
    </g>
</svg>

希望这有帮助:)