我正在尝试使用一个圆圈来了解viewBox。我有两个测试,每个测试都有两种测试方法。第一个测试使用的viewBox为0 0 30 30,它应该显示圆的左上角。第二个测试使用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小提琴-https://jsfiddle.net/0scrgh4x/
答案 0 :(得分: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>