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

...然后只拉伸“拉伸” G元素，通过操纵viewBox属性。但显然，viewBox属性不适用于g元素。

是否有任何其他方式来拉伸SVG中的特定“g”元素，而不必拉伸整个SVG？

Answer 1

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

如果这样做不好，您可以随时尝试向<g>元素添加transform =“scale（x，y）”，其中x和y是您需要计算的数值比例因子。

顺便说一句<g>元素不支持宽度或高度属性或虽然<svg>元素。