CODEWITHSUNDEEP
javascriptjqueryhtmlsvg
Johnny Rockex
Johnny Rockex

Reputation: 4196

Embed SVG in another SVG, jQuery

I'm appending a lot of blank SVGs like a mosaic to an svg called 'background', like so: 

var baseView = document.createElementNS(svgNS,"rect"); 
baseView.setAttributeNS(null,"id",id);
baseView.setAttributeNS(null,"x",xOff);
baseView.setAttributeNS(null,"y",yOff);
baseView.setAttributeNS(null, 'height', bD);
baseView.setAttributeNS(null, 'width', bD);
baseView.setAttributeNS(null,"fill",'red');
baseView.setAttributeNS(null,"stroke","none");
document.getElementById("background").appendChild(baseView);

Where background is defined:

<svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

I'm then trying to embed a further SVG within the baseView SVG:

var trunkView = document.createElementNS(svgNS, 'rect'); 
trunkView.setAttributeNS(null,"id",trunkID);
trunkView.setAttributeNS(null,"x",xInset);
trunkView.setAttributeNS(null,"y",yInset);
trunkView.setAttributeNS(null, 'height', (bD/2 + branchWidth));
trunkView.setAttributeNS(null, 'width', trunkWidth);
trunkView.setAttributeNS(null,"fill","black");
trunkView.setAttributeNS(null,"stroke","none");
baseView.appendChild(trunkView);

I've also tried:

document.getElementById(id).appendChild(branchView);

When I append directly to the 'background' svg the child 'trunkView' appends correctly and is visible, but not when it is embedded within 'baseView'. Per the browser, it says it is there but is not displaying. Any ideas?

Upvotes: 0

Views: 113

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17124

If you have a look at the specs of 'rect' elements, you'll see this :

Content model:
Any number of the following elements, in any order:
animation elements — ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
descriptive elements — ‘desc’, ‘metadata’, ‘title’

So 'rect' elements are not allowed as content of 'rect' elements, which would explain why it doesn't render.

See: https://www.w3.org/TR/SVG11/shapes.html#RectElement

EDIT:

To group element, you can use a 'g' element. Like this:

var baseView = document.createElementNS('http://www.w3.org/2000/svg',"rect"); 
baseView.setAttributeNS(null,"id",5);
baseView.setAttributeNS(null,"x",5);
baseView.setAttributeNS(null,"y",5);
baseView.setAttributeNS(null, 'height', 100);
baseView.setAttributeNS(null, 'width', 100);
baseView.setAttributeNS(null,"fill",'red');
baseView.setAttributeNS(null,"stroke","none");
document.getElementById("group").appendChild(baseView);
var trunkView = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
trunkView.setAttributeNS(null,"id",10);
trunkView.setAttributeNS(null,"x",40);
trunkView.setAttributeNS(null,"y",40);
trunkView.setAttributeNS(null, 'height', 100);
trunkView.setAttributeNS(null, 'width', 100);
trunkView.setAttributeNS(null,"fill","black");
trunkView.setAttributeNS(null,"stroke","none");
document.getElementById("group").appendChild(trunkView);
<svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="group"></g>
</svg>

See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

Upvotes: 2

Related Questions