CODEWITHSUNDEEP
javascriptsvgviewbox
Frank Millman
Frank Millman

Reputation: 693

Viewbox using symbol differs from viewbox using underlying shape

I am trying to understand viewBox, using a circle for testing. I have two tests, and for each one I have two ways of testing. The first test uses a viewBox of 0 0 30 30, which should show the top left hand corner of the circle. The second test uses a viewBox of 30 30 30 30, which should show the bottom right hand corner of the circle. If I create the svg circle directly, both tests work as intended. If I place the circle inside a symbol, the first test works, but the second test displays nothing.

var NS = 'http://www.w3.org/2000/svg';
var xlink = 'http://www.w3.org/1999/xlink';

// svg definitions
var svg_defs = document.createElementNS(NS, 'svg');
document.body.appendChild(svg_defs);
svg_defs.style.width = '0px';
svg_defs.style.height = '0px';

// svg circle definition
var circ1 = document.createElementNS(NS, 'circle');
svg_defs.appendChild(circ1);
circ1.id = 'circ1';
circ1.setAttributeNS(null, 'cx', 30);
circ1.setAttributeNS(null, 'cy', 30);
circ1.setAttributeNS(null, 'r', 30);
circ1.setAttributeNS(null, 'fill', 'lightgreen');

// svg symbol definition with circle
var sym = document.createElementNS(NS, 'symbol');
svg_defs.appendChild(sym);
var circ2 = document.createElementNS(NS, 'circle');
sym.appendChild(circ2);
sym.id = 'circ2';
circ2.setAttributeNS(null, 'cx', 30);
circ2.setAttributeNS(null, 'cy', 30);
circ2.setAttributeNS(null, 'r', 30);
circ2.setAttributeNS(null, 'fill', 'lightblue');

// div using viewBox(0 0 30 30)
var div_a = document.createElement('div');
document.body.appendChild(div_a);

// svg for circle definition
var svg1a = document.createElementNS(NS, 'svg');
div_a.appendChild(svg1a);
svg1a.style.margin = '20px';
svg1a.style.border = '1px solid black';
svg1a.setAttributeNS(null, 'width', 30);
svg1a.setAttributeNS(null, 'height', 30);
svg1a.setAttributeNS(null, 'viewBox', '0 0 30 30');

// attach circle definition
var u1a = document.createElementNS(NS, 'use');
u1a.setAttributeNS(xlink, 'xlink:href', '#circ1')
svg1a.appendChild(u1a);

// svg for symbol definition
var svg2a = document.createElementNS(NS, 'svg');
div_a.appendChild(svg2a);
svg2a.style.margin = '20px';
svg2a.style.border = '1px solid black';
svg2a.setAttributeNS(null, 'width', 30);
svg2a.setAttributeNS(null, 'height', 30);
svg2a.setAttributeNS(null, 'viewBox', '0 0 30 30');

// attach symbol definition
var u2a = document.createElementNS(NS, 'use');
u2a.setAttributeNS(xlink, 'xlink:href', '#circ2')
svg2a.appendChild(u2a);

// div using viewBox(30 30 30 30)
var div_b = document.createElement('div');
document.body.appendChild(div_b);

// svg for circle definition
var svg1b = document.createElementNS(NS, 'svg');
div_b.appendChild(svg1b);
svg1b.style.margin = '20px';
svg1b.style.border = '1px solid black';
svg1b.setAttributeNS(null, 'width', 30);
svg1b.setAttributeNS(null, 'height', 30);
svg1b.setAttributeNS(null, 'viewBox', '30 30 30 30');

// attach circle definition
var u1b = document.createElementNS(NS, 'use');
u1b.setAttributeNS(xlink, 'xlink:href', '#circ1')
svg1b.appendChild(u1b);

// svg for symbol definition
var svg2b = document.createElementNS(NS, 'svg');
div_b.appendChild(svg2b);
svg2b.style.margin = '20px';
svg2b.style.border = '1px solid black';
svg2b.setAttributeNS(null, 'width', 30);
svg2b.setAttributeNS(null, 'height', 30);
svg2b.setAttributeNS(null, 'viewBox', '30 30 30 30');

// attach symbol definition
var u2b = document.createElementNS(NS, 'use');
u2b.setAttributeNS(xlink, 'xlink:href', '#circ2')
svg2b.appendChild(u2b);

See this JS Fiddle - https://jsfiddle.net/0scrgh4x/

Upvotes: 0

Views: 96

Answers (1)

enxaneta
enxaneta

Reputation: 33062

I've added style="overflow:visible" to the symbol.

<svg style="width: 0px; height: 0px;">
<symbol id="circ2"  viewBox="0 0 30 30" style="overflow:visible">
    <circle cx="30" cy="30" r="30" fill="lightblue"></circle>  </symbol>
</svg>


 <svg width="30" height="30" viewBox="30 30 30 30" style="margin: 20px; border: 1px solid black;">
 <use xlink:href="#circ2"></use>
  
  </svg>

UPDATE

An alternative solution where the <symbol> has a viewBox="0 0 60 60". Since the symbol has the size of the circle there is no need for style="overflow:visible"

svg{border:1px solid}
<svg viewBox="0 0 60 60" width="0" >
  <symbol id="circ2" viewBox="0 0 60 60" >
    <circle cx="30" cy="30" r="30" fill="lightblue"></circle>
  </symbol>
  <use xlink:href="#circ2" x="0" y="0"></use>
</svg>

<svg width="30" height="30" viewBox="0 0 30 30" >
 <use xlink:href="#circ2"  width="60" height="60"></use>
</svg>

<svg width="30" height="30" viewBox="30 30 30 30" >
 <use xlink:href="#circ2"  width="60" height="60"></use>
</svg>

Upvotes: 1

Related Questions