Home/ Questions/Q 6127257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:29:01+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0