Html 在svg图像上画一条线_Html_Css_Image_Svg_Draw

Html 在svg图像上画一条线

html css image svg

Html 在svg图像上画一条线,html,css,image,svg,draw,Html,Css,Image,Svg,Draw,我该如何画一条线来覆盖svg图像而不是覆盖svg图像 <html> <head> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/> </svg> &l

我该如何画一条线来覆盖svg图像而不是覆盖svg图像

<html>
<head>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
     <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/>
</svg>
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"  type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
</html>

您可以在此处运行代码：

编辑：有效的代码（至少在firefox上，对于safari，文件扩展名必须是.xhtml）-

您是否尝试将

放置在图像后面，如下所示：

<html>
<head>
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"  type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
     <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/>
</svg>
</html>

那么您可能希望将图像包含在

中：

要使该行位于图像顶部，它必须位于dom中该行的后面。 SVG按照在dom中找到的顺序呈现形状和图像。请注意，SVG规范中没有z-index属性，因此不能使用它。您所能做的就是将该行放在dom中图像的后面

另一个注意事项：您可以通过Javascript操纵SVG，因此您可以使用普通Javascript函数操纵dom

是的，图像仍然覆盖了行；（通过修改您的版本使其正常工作！（我用代码更新了问题）…它在firefox上运行良好，但在safari上运行失败（只出现一个带边框的空白框）…知道为什么吗？谢谢！！善良的先生：显然在Safari上，xml html相关文件必须显式重命名为.xhtml扩展名才能工作..我的问题中最后一段代码已经更新..非常感谢！

<html>
<head>
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"  type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
     <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/>
</svg>
</html>

<html>
<head>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"  width="1000" height="1000" />
    <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/>
</svg>
</html>