SVG 元素未显示在浏览器中答案

【问题标题】：SVG elements are not shown in a browserSVG 元素未显示在浏览器中
【发布时间】：2011-06-08 16:31:11
【问题描述】：

我遇到了一个很奇怪的情况。我有一个使用 jQuery SVG 插件绘制一些线条的脚本。它在一个单独的 html 文件中工作。但是，一旦我复制了该脚本并插入到另一个 html 文件中，它就会停止在浏览器中显示 SVG 元素。它工作得很好，因为当我在运行脚本后看到页面的源代码时，我可以看到脚本正在向页面添加 SVG 元素。无论如何，这是页面的 SVG 代码：

<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>

浏览器中未显示这些 SVG 元素可能是什么问题？有没有其他人遇到过这种奇怪的情况？

【问题讨论】：

是的，知道您使用的浏览器非常重要，因为并非所有浏览器都支持 SVG。（我会让悬念建立在那个之上。）
了解更多关于这个 html 文件的信息也会很有帮助。 SVG 究竟是在文件中的哪个位置创建的？什么是 CSS 规则等？
我使用 chrome。我认为问题不在于浏览器，因为它向我显示了 Chrome 中带有 SVG 的第一个 html 页面，但是当我打开第二个 html 页面时，即使它在源代码中包含这些 svg 元素，它也没有显示。
它对我来说也很好用，所以它必须是关于新页面和/或它的 CSS（或 JavaScript）的东西。
如果尚未添加文档类型，是否可以添加？

标签： javascript jquery svg

【解决方案1】：

您忘记将 SVG 命名空间标签添加到您的页面？

【讨论】：

【解决方案2】：

尝试向 svg 元素添加 viewBox 属性，以确保坐标系使线条出现在 svg 视口中。或者确保在两个文档中 svg 元素的大小相同。我的猜测是，在一个文档中 svg 相当宽，而在另一个文档中则没有那么宽（因此剪掉了线条）。

【讨论】：

【解决方案3】：

问题解决了。我没有注意到在未显示 SVG 元素的新页面中，我正在绘制 SVG 元素的 DIV 元素已被另一个 DIV 包裹。在 CSS 文件中，包装器 DIV 有一个属性display: table;。我删除了该属性，现在显示了 SVG 元素。谢谢大家的帮助和建议。

【讨论】：