在 svg 图像上画一条线
Posted
技术标签:
【中文标题】在 svg 图像上画一条线【英文标题】：Drawing a line over an svg image 【发布时间】：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 version="1.1" 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"> </image>
<line x1="50" y1="0" x2="500" y2="1000" style="stroke:#006600; stroke-width:15"/>
</svg>
【问题讨论】：
【参考方案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" />
<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
【讨论】：
以上是关于在 svg 图像上画一条线的主要内容，如果未能解决你的问题，请参考以下文章