Question

我有一个SVG rect，其中包含以下属性：

<rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;"  />

如果我应用skewX(10)变换，则矩形的宽度和高度会发生变化。然后我如何使用普通的javascript（没有库）来计算它的真实宽度和高度？

Answer 1

将<rect>包裹在<g>元素中;然后获得对该组的引用;然后打电话给getBBox()。

＆＃13;

var  bbox = document.getElementById("wrapper").getBBox();;
alert("width=" + bbox.width + " height=" + bbox.height);

＆＃13;

<svg>
    <g id="wrapper">
        <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;"
              transform="skewX(10)" />
    </g>
</svg>

＆＃13;

我们将元素包装在一个组中的原因是因为getBBox()返回的边界框不包含变换的效果。此外，它不必是<g>它可以是<rect>的任何父级，只要没有其他子元素可以影响边界。

或者你可以像斯蒂芬建议的那样使用三角函数。

在倾斜变换后得到SVG元素的宽度和高度 - javascript

1 个答案: