SVG lines under other already created "objects"

Question

Let's say I created some circles in SVG like

<circle cx="320" cy="285" r="10" stroke="black" stroke-width="1" fill="lightblue" />

and after that I create some lines that pass through the circles. But I don't want the lines to be "above" my circles but under them. I know I could first create the lines and then the circles but I want to create first the circles and then the lines.

Any ideas?

As noted in the answers below, you have to manipulate the DOM (after creation, using JavaScript) to move the lines earlier in the document. The "painter's model" of SVG has no concept of z-index; elements seen later in the document always draw on top of those seen earlier. — Phrogz, Mar 24 '11 at 19:43

Peter Collingridge · Answer 1 · 2011-03-24T20:17:43.823

How are you generating the SVG and how do you intend to view it?

If you're viewing it in a browser, then you could use some EMCAScript (essentially Javascript).

For example:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  onload="init(evt)">

<script type="text/emcascript">
  <![CDATA[
    function init(evt) {

        if ( window.svgDocument == null ) {
            svgDocument = evt.target.ownerDocument;
        }

        var line_group = svgDocument.getElementById( "line-group" )
        svgDocument.documentElement.insertBefore( line_group, svgDocument.documentElement.firstChild);
    }
  ]]>
</script>

<circle cx="80" cy="80" r="40" fill="blue"/>
<circle cx="120" cy="120" r="40" fill="green"/>

<g id="line-group">
  <line x1="0" y1="10" x2="190" y2="200" stroke-width="2" stroke="black"/>
  <line x1="10" y1="0" x2="200" y2="190" stroke-width="2" stroke="black"/>
</g>

</svg>

This SVG draws some lines after some circles, but when it's loaded it calls a function with onload="init(evt)". This function selects the group of lines and moves it to the beginning of the SVG.

If your shapes aren't in groups then it's a bit more tricky. You'd have to give the lines ids which allows you to select them easily (e.g. line1, line2 etc.), then move them one by one.

I think you have a typo here; you want to insert the line_group before the first circle. I also personally wouldn't put the line_group into the circle group, but simply `svgDocument.documentElement.insertBefore( line_group, svgDocument.documentElement.firstChild );` — Phrogz, Mar 24 '11 at 19:42
Yeah, you're right about both things. I've edited my answer. — Peter Collingridge, Mar 24 '11 at 20:18

score 0 · Answer 2 · answered Mar 23 '11 at 23:32

0

Draw two line segments instead of one line. This is assuming you do not want the line to be visible in the circle portion.

answered Mar 23 '11 at 23:32

brian_d

11,190
5
47
72

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

You could use a clipPath or a mask that has the same shape as your circle

edited May 23 '17 at 12:04

Community

1
1

answered Mar 24 '11 at 20:49

user123444555621

148,182
27
114
126

SVG lines under other already created "objects"

3 Answers3