Html 在SVG元素中拉伸特定层
我试图创建一个相当复杂的SVG界面,由几个图形层组成 我希望在调整浏览器窗口大小时,通过使用viewBox属性来拉伸一些层(即SVG中的“g”元素)。同一SVG中的其他层应单独缩放或处理。这就是我遇到问题的地方 我希望能够做到以下几点:Html 在SVG元素中拉伸特定层,html,svg,Html,Svg,我试图创建一个相当复杂的SVG界面,由几个图形层组成 我希望在调整浏览器窗口大小时,通过使用viewBox属性来拉伸一些层(即SVG中的“g”元素)。同一SVG中的其他层应单独缩放或处理。这就是我遇到问题的地方 我希望能够做到以下几点: <svg> <g name="stretchable" width="900px" height="500px" viewBox="0px 0px 900px 500px"> ...insert stretchab
<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属性仅拉伸“可拉伸”g元素。但显然,viewBox属性不适用于g元素
有没有其他方法可以拉伸SVG中的特定“g”元素,而不必拉伸整个SVG?为什么不使用
元素而不是
元素呢。它确实允许使用viewBox属性
如果这样做不好,您可以尝试将transform=“scale(x,y)”添加到
元素中,其中x和y是您需要计算的数字比例因子
顺便说一句,
元素也不支持宽度或高度属性,尽管
元素支持宽度或高度属性。极好的解决方案!尤其是变换/缩放。我一直在使用scale,但始终认为它是一个单值属性(始终保持纵横比)。我没有意识到可以添加两个值来获得拉伸行为。我已经计算了比例因子并做了很多变换字符串操作,所以我将选择您的transform=“scale(x,y)”建议。当然,这就像元素上的符咒。非常感谢!