在 svg 图像上画一条线答案

【问题标题】：Drawing a line over an svg image在 svg 图像上画一条线
【发布时间】：2011-09-30 01:28:23
【问题描述】：

如何在 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>

【问题讨论】：

标签： html css image svg draw

【解决方案1】：

那么您可能想在<svg> 中包含图像：

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

【讨论】：

通过修改你的版本让它工作！（我用代码更新了问题）......它在firefox上工作正常，但在safari上失败（只是出现一个带边框的空白框）..知道为什么吗？谢谢！！
亲切的先生：显然在 Safari 上，xml-html 相关文件必须明确重命名为 .xhtml 扩展名才能工作。最后的工作代码在我的问题中更新了。非常感谢！

【解决方案2】：

您是否尝试将<svg> 放在这样的图像之后：

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

【讨论】：

是的，图像仍然覆盖了线条.. ;(

【解决方案3】：

为了让你在图像顶部有线条，它必须在 dom 之后。 SVG 按照它在 dom 中找到的顺序呈现形状和图像。请注意，SVG 规范中没有 z-index 属性，因此您不能使用它。您所能做的就是在 dom 中的图像之后放置行。

另外注意：你可以通过 Javascript 操作 SVG，所以你可以使用普通的 javascript 函数来操作 dom

【讨论】：