如何使 svg 行响应答案

【问题标题】：How to make svg line responsive如何使 svg 行响应
【发布时间】：2013-11-17 17:35:39
【问题描述】：

我已经制作了这个 svg 图http://jsfiddle.net/F3wPz/2/show/ 并尝试用百分比来表达其中的形状http://jsfiddle.net/F3wPz/2/

然而，当矩形响应调整大小时，线条不会。例如，在这一行中

<line id="svg_3" y2="55" x2="447" y1="55" x1="168" stroke-width="5" stroke="#000000" fill="none"/>

我犹豫是否认为 x 和 y 轴上的行首和行尾可以用百分比表示，因为它们是唯一不调整屏幕大小的行。在@987654324 中表示行是否错误@?。

【问题讨论】：

【解决方案1】：

可以用百分比表示线坐标。

【讨论】：

【解决方案2】：

http://meloncholy.com/blog/making-responsive-svg-graphs/

<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<g>
...
</g>
</svg>

【讨论】：

【解决方案3】：

这些 x 和 y 值不是像素单位，它们以相对于 SVG 坐标系的单位表示。如果您的 SVG 使用相对单位（例如，% 或 em）调整大小，则该行应相应缩放，而无需修改任何 line 属性。我认为您缺少的是 viewBox 元素上的 <svg> 属性。

Here's an example 以 50% 的比例显示您的 SVG。