Javascript SVG元素不会显示在浏览器中

Javascript SVG元素不会显示在浏览器中,javascript,jquery,svg,Javascript,Jquery,Svg,我遇到了一个相当奇怪的情况。我有一个脚本,它使用jQuerySVG插件绘制了一些线条。它在一个单独的html文件中工作。但一旦我复制了这个脚本并插入到另一个html文件中,它就会停止在浏览器中显示SVG元素。它工作得非常好,因为当我在运行脚本后看到页面的源代码时,我可以看到脚本正在向页面添加SVG元素。以下是任何情况下页面的SVG代码: <svg version="1.1"> <line x1="492" y1="503" x2="717" y2="576" stroke=

我遇到了一个相当奇怪的情况。我有一个脚本,它使用jQuerySVG插件绘制了一些线条。它在一个单独的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名称空间标记添加到页面?

尝试向SVG元素添加viewBox属性,以确保坐标系使线条显示在SVG视口中。或者确保两个文档中svg元素的大小相同。我的猜测是,在一个文档中,svg相当宽,而在另一个文档中,svg没有那么宽,因此将行剪裁掉。

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

是的,知道您使用的浏览器非常重要,因为并非所有浏览器都支持SVG。我会让悬念建立在这个基础上。了解更多关于另一个html文件的信息也会有所帮助。创建SVG的确切位置在文件中?CSS规则是什么,等等?我使用chrome。我想问题不在浏览器中,因为它在Chrome中显示了第一个带有SVG的html页面,但当我打开第二个html页面时,它没有显示,即使它的源代码中包含了SVG元素。它对我来说也很好,所以它必须是关于新页面和/或它的CSS或JavaScript的。如果没有添加doctype,添加doctype是否有效?