` 下的元素` element that gets transform attr,javascript,html,css,svg,zooming"/>
时间戳

首页 > 解决方案 > 如何为`设置静态SVG大小` 下的元素` element that gets transform attr

javascript - 如何为`设置静态SVG大小` 下的元素` element that gets transform attr

问题描述

主要问题：

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

IE

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

标签： javascripthtmlcsssvgzooming

解决方案

除了直接对 svg 元素标签 ( svg ) 应用转换，您可以使用组标签 ( g ) 来翻译所有内容，使用矩形标签 ( 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>

希望这有帮助:)

推荐阅读