在 svg 图像上画一条线
我如何画一条线从 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>
您可以在此处运行代码： http://www.w3schools.com/tags/ tryit.asp?filename=tryhtml_div_test
编辑：有效的代码（至少在 Firefox 上，对于 safari，文件扩展名必须是 .xhtml）-
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7in" height="4in" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="600px" height="400px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"> </image>
<line x1="50" y1="0" x2="500" y2="1000" style="stroke:#006600; stroke-width:15"/>
</svg>
how would I draw the line to go over instead of under the svg image?
<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>
You can run the code here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test
Edit: Code that works (at least on firefox, for safari the file extension has to be .xhtml)-
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7in" height="4in" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="600px" height="400px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"> </image>
<line x1="50" y1="0" x2="500" y2="1000" style="stroke:#006600; stroke-width:15"/>
</svg>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
那么您可能想将图像包含在
中：Then probably you want to include the image inside
<svg>:您是否尝试将
放置在图像后面，如下所示：Did you try to place
<svg>after the image like this:为了让该线位于图像顶部，它必须位于 dom 中的图像之后。
SVG 按照在 dom 中找到的顺序渲染形状和图像。
请注意，SVG 规范中没有 z-index 属性，因此您无法使用它。
您所能做的就是将这一行放在 dom 中的图像后面。
另请注意：您可以通过 Javascript 操作 SVG，因此您可以使用普通的 javascript 函数操作 dom
for you to have the line on top of the image, it has to be after it in the dom.
SVG renders shapes and images in the order that it finds in the dom.
Note that there is no z-index attribute in the SVG specifications, so you just can't use that.
All you can do is place the line after the image in the dom.
Another note: you can manipulate SVG through Javascript, so you can manipulate the dom using normal javascript functions