Question

在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）。另外，该线可以是水平的，垂直的，或者是诸如对角线的角度，并且不需要是复杂的形状。

Answer 1

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

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

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

您的问题在于您要实现的目标的细节很短。如果需要在页面加载时添加行，则可以非常容易地将其合并到现有文档中。如果需要在页面加载后绘制，则需要使用Javascript完成。

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

希望有所帮助。

Answer 2

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

Answer 3

考虑到SVG图像只包含专门的XML标记，我不明白为什么你不能将一个SVG的标签添加到使用JavaScript覆盖在第一个SVG图像上的页面DOM上，或者甚至只修改副本原始SVG加载到页面上的DOM中。但是，这些可能还不可能，因为它似乎不能将SVG内容的标签直接放在HTML文件中。

您也可以使用HTML5的<canvas>代码。

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

3 个答案: