使用符号的Viewbox与使用基础形状的viewbox不同

Question

我正在尝试理解viewBox，使用一个圆圈进行测试。我有两个测试，对于每个测试，我有两种测试方法。第一个测试使用的viewBox为0 0 30 30，它应该显示圆的左上角。第二个测试使用的viewBox为30 30 30，它应该显示圆的右下角。如果我直接创建svg圆，两个测试都能正常工作。如果我将圆放在一个符号中，第一个测试可以工作，但第二个测试不显示任何内容。

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);

查看这个JS Fiddle https://jsfiddle.net/0scrgh4x/

Answer 1

我已将style="overflow:visible"添加到符号中。

​

<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>

​

更新

另一种解决方案是<symbol>具有viewBox="0 0 60 60"。由于符号具有圆的大小，因此不需要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>

​