Warum erscheint ein leerer Bereich innerhalb des SVG-Elements?

Question

Ich habe die fiddle mit diesem Problem. Wenn ich die Eigenschaft viewBox auf dem Symbol Element gesetzt habe, wird das Symbol korrekt angezeigt. Aber wenn ich viewBox mit dem gleichen Wert auf svg Element mit verwenden innen, um verwenden Element erscheint seltsam leerer Raum, innerhalb von SVG-Container.

Viewport der ersten Variante ist das gleiche mit Viewport der zweiten Variante - 35x35px Größe bei 2.5x3.5px coords.

Was ist der Grund für dieses Verhalten? Bug oder mein eigener Fehler?

BEARBEITEN Sie: Fügen Sie Bild mit korrekten und falschen Bereichen hinzu.

#svg-icons { 
 
    display: none; 
 
} 
 
.icon { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
} 
 
.icon + .icon { 
 
    margin-left: 20px; 
 
}

<svg version="1.1" id="svg-icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <symbol id="icon-1" viewBox="2.5 3.5 35 35"> 
 
    <rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" /> 
 
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" /> 
 
    </symbol> 
 
    <symbol id="icon-2"> 
 
    <rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" /> 
 
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" /> 
 
    </symbol> 
 
</svg> 
 

 
<svg class="icon icon-1" width="100" height="100"> 
 
    <use xlink:href="#icon-1"></use> 
 
</svg> 
 

 
<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100"> 
 
    <use xlink:href="#icon-2"></use> 
 
</svg>

Answer 1

Dies wird-Problem durch das Denken über gelöst werden, wie die Verwendung Element auf Zeichnung behandelt wird.
Nach SVG 1.1 2nd edition, verwenden Element verweist Symbolelement wird als SVG-Element auf Zeichnung behandelt. Das Ergebnis dieser Svg-Struktur ist also dasselbe.

<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100"> 
    <g> 
     <svg width="100%" height="100%"> 
      <rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" /> 
      <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" /> 
     </svg> 
    </g> 
</svg> 

Inner SVG Element Bereich von 100% der Breite und Höhe, bei (0,0) angeordnet ist, und äußeren SVG Element zu (2,5, 3,5) viewBox versetzt.
So werden Formen durch Verschiebung der Rendering-Bereiche von 2 SVG-Elementen abgeschnitten.