在SVG元素内拉伸特定图层

Question

我正在尝试创建一个相当复杂的SVG界面，由几个图形层组成。

我想通过使用viewBox属性在调整浏览器窗口大小时拉伸某些图层（即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属性来拉伸“stretchchable”g元素。但显然，viewBox属性不适用于g元素。

是否还有其他方法可以在SVG中拉伸特定的“g”元素，而不必拉伸整个SVG？

Answer 1

为什么不使用<svg>元素而不是<g>元素。它允许使用viewBox属性。

如果这没有用，你总是可以尝试在<g>元素中添加transform =“scale（x，y）”，其中x和y是你需要计算的数字比例因子。

BTW <g>元素不支持宽度或高度属性，尽管<svg>元素也是如此。