javascript - 使用符号的 View 框与使用基础形状的 View 框不同

Question

我试图理解 viewBox，使用圆圈进行测试。我有两项测试，对于每一项我都有两种测试方法。第一个测试使用 0 0 30 30 的 viewBox，它应该显示圆圈的左上角。第二个测试使用 30 30 30 30 的 viewBox，它应该显示圆圈的右下角。如果我直接创建 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>