我遇到了一个非常奇怪的情况。我有一个脚本,使用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元素未在浏览器中显示的问题是什么?还有其他人遇到过这种奇怪的情况吗?
答案 0 :(得分:0)
您忘了将SVG名称空间标记添加到您的页面?
答案 1 :(得分:0)
尝试向svg元素添加viewBox
属性,以确保坐标系使线条出现在svg视口中。或者确保在两个文档中svg元素的大小相同。我的猜测是,在一个文档中,svg相当宽,而在另一个文档中,它不是那么宽(因此剪掉了线条)。
答案 2 :(得分:0)
问题解决了。我没有注意到在未显示SVG元素的新页面中,我绘制SVG元素的DIV元素已被另一个DIV包装。在CSS文件中,包装器DIV具有属性display: table;
。我删除了该属性,现在显示了SVG元素。谢谢你们的帮助和建议。