How to use the background layers
SVG has no concept of layers. So elements cannot be moved "to the back" of things that have been added previously. Elements that you add are simply appended and appear "on top" of anything that's been added previously.
Pseudo SVG layers with groups
There is a hack that is both simple to write and achieve. This method is to
use groups (<g>
tags). Simply add the group to the scene before
anything else, and then when you want to add new elements at the back
of what you've drawn, append it this group. Example code would look like
this:
<svg id="mysvg" width="300" height="300" style="border: 1px solid gray" xmlns="http://www.w3.org/2000/svg"> <!-- This is the background "layer" --> <g id="svg-background-group"></g> <!-- A rect that we can add something to the back of --> <rect x="10" y="10" width="150" height="150" fill="red"></rect> </svg> <button onclick="append()" style="font-size: 16pt">Add a green circle at the back</button>
And the JavaScript is thus (it uses the RGraph create function for convenience only - there's no monkey business going on!).
<script> // Create a new SVG circle element and position it behind // the red square function append () { var svg = document.getElementById('mysvg'), background = document.getElementById('svg-background-group'); // The RGraph function to create SVG elements is // used here as a convenience RGraph.SVG.create({ svg: svg, type: 'circle', parent: background, attr: { cx: 150, cy: 150, r: 50, fill: 'green' } }); } </script>
A live example
Simply click the button to add a green circle at the back of the red rectangle (nothing is being redrawn).
So how is this implemented in RGraph?
In RGraph, in the RGraph.svg.common.core.js
function RGraph.SVG.createSVG()
there is a short loop that creates ten (by default) of these layers before the
all-elements
group is added. So anything that you add to these
background groups will appear behind any elements that are added by RGraph. In
effect this gives you the background layers. References to these layers are
stored on the obj.layers
array and are also added to the SVG tag
itself. So you could do this:
<script> bg1 = obj.layers.background1; bg2 = obj.layers.background2; bg3 = document.getElementById('mysvg').background4; bg4 = document.getElementById('mysvg').background5; </script>
So you could add a <rect>
element behind your chart using them like this
(assume that the obj
variable is your chart object):
<script> RGraph.SVG.create({ svg: obj.svg, type: 'rect', parent: obj.layers.background5, attr: { x: 10, y: 10, width: 50,height: 50, fill: 'red' } }); </script>