Is it possible to draw a line over an SVG image?_问答_开发者

Is it possible to draw a line over an SVG image?

开发者 https://www.devze.com 2023-03-18 17:51 出处：网络

Is it possible, in the realm of HTML/CSS, to programmatically draw a line over an SVG image? Thanks Edit: What I have so far-

相关专题：css draw svg

Is it possible, in the realm of HTML/CSS, to programmatically draw a line over an SVG image?

Thanks

Edit: What I have so far-

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

Edit: The line can be drawn at load time (i.e. no need for javascript). In addition, the line can b开发者_运维知识库e horizontal, vertical, or at angle such as diagonal and need not be a complex shape.

Yes, there's no reason why not.

SVG is a vector graphics format in XML; it would be simple to add an additional element to an existing SVG drawing which draws a line.

Since it's in the document DOM, you could also draw the line using a separate SVG image, or even just a simple HTML <div> element with a border or filled background, if all you wanted was a horizontal or vertical line.

Your question is quite short on detail of what you're trying to achieve. If the line needs to be added at page load time, it could be incorporated into the existing document very easily. If it needs to be drawn after page load, it would need to be done using Javascript.

If you need to use Javascript, I'd recommend looking into the Raphael library, as it makes drawing SVG graphics on your browser very very easy. (it also has a fall-back mode to draw in VML for older versions of IE, so it's very cross-browser compatible).

Hope that helps.

You may use an DIV and style it as a line (positioning, height 1pt, etc.). But if you have an SVG, why don't you draw the line in SVG?

Considering SVG images consist of nothing more than specialized XML tags, I don't see why you couldn't add tags for one SVG to the page DOM overlaid on the first SVG image using JavaScript, or even just modify the copy of the original SVG loaded into DOM on the page. These may not be possible just yet, though, as it doesn't seem you can place tags for SVG stuff directly in an HTML file.

You could also probably use HTML5's <canvas> tag.