是否可以在 SVG 图像上画一条线？答案

【问题标题】：Is it possible to draw a line over an SVG image?是否可以在 SVG 图像上画一条线？
【发布时间】：2011-09-29 23:20:53
【问题描述】：

是否可以在 HTML/CSS 领域以编程方式在 SVG 图像上画一条线？

谢谢

编辑：到目前为止我所拥有的-

<html>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="0" y1="10" x2="1000" y2="300" style="stroke:#006600; stroke-width:15"/>
    <line x1="300" y1="0" x2="0" y2="300" style="stroke:#006600; stroke-width:15"/>
    <embed src="logo.svg" width="1000" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
</svg>

编辑：可以在加载时绘制线条（即不需要 javascript）。此外，线可以是水平的、垂直的或成角度的，例如对角线，而不必是复杂的形状。

【问题讨论】：

标签： html css image svg draw

【解决方案1】：

是的，没有理由不这样做。

SVG 是 XML 中的矢量图形格式；在现有的 SVG 绘图中添加一个额外的元素来绘制一条线会很简单。

由于它位于文档 DOM 中，因此您还可以使用单独的 SVG 图像来绘制线条，如果您想要的只是水平或垂直线条，甚至可以使用带有边框或填充背景的简单 HTML <div> 元素。

您的问题没有详细说明您要达到的目标。如果需要在页面加载时添加该行，可以很容易地将其合并到现有文档中。如果需要在页面加载后绘制，则需要使用Javascript完成。

如果您需要使用 Javascript，我建议您查看 Raphael 库，因为它可以让您在浏览器上轻松绘制 SVG 图形。（它还有一个回退模式，可以为旧版本的 IE 在 VML 中绘制，因此它非常兼容跨浏览器）。

希望对您有所帮助。

【讨论】：

是的，这当然有帮助。感谢您的详细回答。我将研究向现有 SVG 或 div 元素添加元素。我用更多细节更新了我的问题。

【解决方案2】：

您可以使用DIV 并将其设置为一条线（定位、高度 1pt 等）。但是如果你有 SVG，为什么不在 SVG 中画线呢？

【讨论】：

嗨，feelela，我如何在 SVG 中画线？我用到目前为止的内容更新了我的问题谢谢
嗨，feela，我可以画线（它们可以很好地交叉）但是，当我在 logo.svg 上画线时，它会被切断，就好像这些线只在它后面交叉

【解决方案3】：

考虑到 SVG 图像仅包含专门的 XML 标签，我不明白为什么您不能使用 JavaScript 将一个 SVG 的标签添加到覆盖在第一个 SVG 图像上的页面 DOM，甚至只是修改页面上加载到 DOM 中的原始 SVG。不过，这些可能目前还无法实现，因为您似乎无法将 SVG 内容的标签直接放在 HTML 文件中。

您也可以使用 HTML5 的 <canvas> 标签。

【讨论】：

使用兼容 HTML5 的浏览器，您可以将 svg 元素直接放在 HTML 文件中。多年来，除了 IE 之外的所有浏览器都可以在 XHTML 中直接包含 svg 片段。