Question

主要问题：

是否可以在<g>元素上设置静态宽度和高度，以使其不受其父视图框<svg>元素上的transform属性影响？

即

<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>视图框接收的缩放事件转换值进行转换，但不缩放<g>元素的尺寸。这样看起来就好像屏幕正在放大视图框的一部分，而<g>元素却没有更改尺寸。

Answer 1

您可以直接使用组标签（ g ）转换所有内容，并使用矩形标签（ svg ）进行转换。 > rect ）以仅缩放您的“视图框”。

<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>

希望获得帮助：）

如何在获取转换属性的{svg id =“ parent”>`元素下为<g id =“ child”>元素设置静态SVG大小

1 个答案: