Question

我想从html或css文件

扩展带有样式属性的SVG

示例： https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_path2

如果我更改SVG元素的宽度或高度，则不会缩放

<svg height="200" width="350">

<img src="test.svg" width="350">代码宽度属性的SVG也无效

Answer 1

SVG基于恒定点，因此我不会进行缩放。如果您必须扩展类似附加示例的内容，您可以使用

transform: scale(1.2);

然而，不建议这样做。

Answer 2

如果希望SVG随宽度/高度的变化而变化，则需要添加一个viewBox标签。

<svg height="400" width="450" viewBox="0 0 400 450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
</svg>

所以现在当我改变宽度和高度（没有别的）时，SVG会缩放。

<svg height="200" width="225" viewBox="0 0 400 450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
</svg>

Answer 3

他们制作的SVG不是响应式SVG。您可以尝试使用任何其他SVG。很抱歉。如果您想清楚，只需调整浏览器窗口的大小并检查它是否响应。他们不是。

感谢downvote学到了一些东西，并且想提一下“当用Adobe Illustrator导出SVG时，你需要明确提到SVG应该是响应的。所以，有了变换缩放CSS的想法，你就会遇到屏幕尺寸并且它不会像在插画家中提到的那样响应。所以两者之间存在差异。如果仍然有问题，有些人可以帮助我。如果这是正确的，请给我。

在HTML5或svg文件中扩展SVG

3 个答案: