SVG 是不可见的，但存在于 DOM 中答案

【问题标题】：SVG is invisible but exists in DOMSVG 是不可见的，但存在于 DOM 中
【发布时间】：2013-11-19 21:28:51
【问题描述】：

我有一堆用 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;

【问题讨论】：

你的代码中真的有stroke- [blank spaces] width，还是有stroke-width？
@mg1075：从截图中可以看出原码是正确的（stroke-width）。

标签： svg d3.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：