如何使svg线响应

Question

我制作了这个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轴上的线和线的起点可以用百分比表示，因为它们只是在屏幕调整大小时没有调整大小。在{{中表达线条是错误的。 1}}？

Answer 1

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

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

相关代码部分：

 <svg width="50%" height="50%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">

Answer 2

很好地以百分比表示线坐标。

Answer 3

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

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