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

在HTML/CSS领域，是否有可能以编程方式在SVG图像上绘制一条线？是否可以在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的）。另外，该线可以是水平的，垂直的或者诸如对角线的角度，并且不需要是复杂的形状。

来源

2011-07-06 Alede

是的，没有理由不。

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

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

你的问题对你要实现的细节很短。如果需要在页面加载时添加该行，可以很容易地将它添加到现有文档中。如果需要在页面加载后绘制，则需要使用Javascript完成。

如果您需要使用Javascript，我建议您查看Raphael库，因为它使得在浏览器上绘制SVG图形非常容易。（它也有一个回退模式，可以为IE的老版本提供VML，所以它是跨浏览器兼容的）。

希望有所帮助。

来源

2011-07-06 21:01:45 Spudley

是的，这当然有帮助。感谢您的详细解答。我将研究添加一个元素到现有的SVG或div元素。我更详细地更新了我的问题。 – Alede

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

来源

2011-07-06 20:51:42 feeela

嗨feeela，我如何在SVG中画线？我更新了我的问题与我到目前为止谢谢 – Alede

@Alede [这里是一个示例] – feeela

嗨feeela，我能够画出线条（它们可以交叉）然而，当我在我的logo.svg上画线时，它会被截断，就好像线条只在它后面穿过 – Alede

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

您也可能使用HTML5的<canvas>标记。

来源

2011-07-06 20:54:33 JAB

使用符合HTML5的浏览器，您可以将svg元素直接放置在HTML文件中。在IE之外的所有浏览器中，包括svg片段在内的XHTML已经可以使用多年。 –

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

回答

相关问题