svg - SVG 是不可见的，但存在于 DOM 中

Question

我有一堆用 D3 创建的线元素，但奇怪的是它们出现在 DOM 中，当我将鼠标悬停在它们上时，我看到它被突出显示，但那里什么都没有，一切都是空白的。代码有点像这样，CSS 有一些奇怪的 webkit-transform-origin 东西。有谁知道出了什么问题？（问题截图：http: //imgur.com/HRE01Gd）

<div>
<svg width="1000" height="700">
<line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke-    width: 10px; color: red;"></line>
</svg>
</div>

-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transform-origin-z: initial;

Answer 1

color不做任何事情。stroke改为设置。目前，您的所有线条都在渲染时完全没有描边，这使得它们不可见。

Answer 2

您需要将颜色更改为描边。例如：

<line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke-width: 10px; stroke: red;"></line>

Answer 3

我有同样的问题。试图设置笔画宽度 - 没有帮助。用元素的正确 x 位置修复它。