SVG lines under other already created "objects" [duplicate]

This question already has answers here: How to use z-index in svg elements? (18 answers) C开发者_如何学Golosed 5 years ago.

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?

---

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.

---

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

---

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