SVG动态调整大小

Question

有人知道如何动态调整svg图像大小，以便它适合容器吗？我发现我的图像溢出了。我想要的是一种方法来调整大小，使其不会溢出。
感谢任何回复。我也尝试将宽度和高度设置为100%。

- k.ken

---

请提供你的代码作为工作的基础。 - Morgan Wilde

重复问题：https://dev59.com/w3A75IYBdhLWcg3wv7_A - Maxim VA

我的代码很多。我真的得把整个文件夹发给你。我可以截图展示一下它的样子，这有帮助吗？我尝试将宽度和高度设置为像上面链接中建议的100%。 - k.ken

@k.ken发布了一个回答，并提供了一个可能适合您的示例。 - Morgan Wilde

Answer 1

好的，实现动态宽度最简单的方法就是为width或/和height提供百分比值。您可以在这里的一个示例中找到我的示例http://jsfiddle.net/VDKwy/

因此，关键部分要么省略svg元素的width和height属性，要么...

<svg width="100%" height="100%"></svg>

然后对内部元素使用百分比值，如下所示：

<rect x="10%" y="10%" width="80%" height="80%" style="fill:blue;stroke-width:5; stroke:black" />

- Morgan Wilde

---

这是我的容器外观的示例。表情图像是SVG格式的。这里是它的快照链接：http://imgur.com/3Yw6v - k.ken

那么，如果您在其中提供了动态宽度和高度，它是否无法适应您所需的空间？ - Morgan Wilde

是的，我明白了。我以为会有其他选项可用。 - k.ken

@k.ken，既然你正在处理可伸缩矢量图形，那么你不应该觉得动态宽度/高度选项是需要避免的。无论你将图像缩小或放大，它都会自适应并保持良好的外观。 - Morgan Wilde

我尝试了我能找到的所有可能的解决方案，但这很令人沮丧。你想更详细地查看我的代码吗？ - k.ken

Answer 2

我发现更容易移除width和height属性，然后从包装的

中应用像素尺寸，例如：

<div style="width: 48px; height: 48px;">
  <svg xmlns="..." viewBox="..."></svg>
</div>

- Radi Totev