我正在尝试创建一个相当复杂的 SVG 界面,由多个图形层组成。
我希望通过使用 viewBox 属性在调整浏览器窗口大小时拉伸(stretch)某些图层(即 SVG 中的“g”元素)。同一 SVG 中的其他图层应单独缩放或处理。这就是我遇到问题的地方。
我希望能够执行以下操作:
<svg>
<g name="stretchable" width="900px" height="500px" viewBox="0px 0px 900px 500px">
...insert stretchable shapes here...
</g>
<g name="non-stretchable">
...insert other shapes here...
</g>
</svg>
...然后通过操作 viewBox 属性仅拉伸(stretch)“可拉伸(stretch)”g 元素。但显然,viewBox 属性在 g 元素中不适用。
有没有其他方法可以拉伸(stretch) SVG 中的特定“g”元素,而不必拉伸(stretch)整个 SVG?
最佳答案
为什么不使用 <svg>
元素而不是 <g>
元素。它确实允许使用 viewBox 属性。
如果这不好,您可以随时尝试向<g>
添加transform="scale(x,y)"元素,其中 x 和 y 是您需要计算的数字比例因子。
顺便说一句<g>
尽管 <svg>
元素也不支持宽度或高度属性元素确实如此。
关于html - 拉伸(stretch) SVG 元素内的特定层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15765201/