CODEWITHSUNDEEP
htmlcssimagesvgdraw
Alede
Alede

Reputation: 381

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

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 be horizontal, vertical, or at angle such as diagonal and need not be a complex shape.

Upvotes: 1

Views: 2169

Answers (3)

Spudley
Spudley

Reputation: 168843

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.

Upvotes: 3

JAB
JAB

Reputation: 21089

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.

Upvotes: 0

feeela
feeela

Reputation: 29932

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?

Upvotes: 1

Related Questions