css - 如何使 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 轴上的行首和行尾可以用百分比表示，因为它们是唯一没有在屏幕调整大小时调整大小的。用%? 表示行是否错误。

score 7 · Accepted Answer

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

这是一个以 50% 比例显示 SVG的示例。

相关代码部分：

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

score 3 · Accepted Answer

3

用百分比表示线坐标很好。

于 2013-11-06T13:07:30.227 回答

score 2 · Accepted Answer

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

3 回答 3