SVG线条不可见。

Question

点击这里查看代码示例

<svg version="1.1">
  <line x1="492" y1="503" x2="717" y2="576" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="500" y1="400" x2="600" y2="400" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="587.5" y2="542.5" stroke="red" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="592.5" y2="527.5" stroke="red" stroke-width="2"></line>
</svg>

如果我将x1="0"和y1="0"赋值，那么线就会变得可见。 为什么上面的代码中线不可见？

- user5638970

---

因为您的SVG没有大小（甚至没有viewbox属性），而且您的线条可能超出了屏幕区域。 - G-Cyrillus

Answer 1

我也曾遇到过同样的困惑，因为我给我的线条提供了fill，但没有提供stroke。添加stroke属性使它们变得可见。

- duhaime

Answer 2

给svg元素添加宽度和高度（确保足够大以覆盖您的绘图）。

<svg version="1.1" width="1000" height="1000">
  <line x1="492" y1="503" x2="717" y2="576" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="500" y1="400" x2="600" y2="400" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="587.5" y2="542.5" stroke="red" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="592.5" y2="527.5" stroke="red" stroke-width="2"></line>
</svg>

fiddle: https://jsfiddle.net/af5g1d3q/

- Everettss

---

MDN的SVG height和width文档解释了为什么这是必要的。 - BSMP