Position von <use> svg Pfad

Ich muss einen Icon-Pfad positionieren, den ich irgendwo im Internet gefunden habe (bald durch meinen eigenen ersetzt werden). Mein erster Versuch mit <symbol> in Verbindung mit <use> gibt mir nicht, was ich trotz nennenswertem Basteln will (das Symbol wird nicht in das Quadrat im Beispiel unten kommen). Dann fand ich, dass die Verwendung von <g> anstelle von <symbol> den Trick macht, aber auf Kosten der manuellen Skalierung des Pfades selbst. Da die automatische Skalierung angenehmer ist, sollte es möglich sein, mit <symbol> genau zu positionieren.Position von <use> svg Pfad

Die W3 specs erwähnen das unterschiedliche Verhalten von <use> in Abhängigkeit davon, ob die Referenz <symbol>, <svg> oder auf andere Weise, aber das fliegt direkt über meinen Kopf.

<!DOCTYPE html> 
 
<title>Icon won't get in box</title> 
 

 
<body> 
 
<svg> 
 
<defs> 
 
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol> 
 
<g id='back2' transform='scale(.062)'> 
 
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path> 
 
</g> 
 
</defs> 
 

 
<g transform='translate(50,50)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#backward' height='30' x='0' y='0' /> 
 
</g> 
 

 
<g transform='translate(50, 100)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#back2' x='0' y='0' /> 
 
</g> 
 
</svg> 
 
</body>

Quelle

2016-06-27 bongbang

Sie müssen nur width="30" zu Ihrem <use> Verweis hinzufügen.

<svg> 
 
<defs> 
 
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol> 
 
<g id='back2' transform='scale(.062)'> 
 
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path> 
 
</g> 
 
</defs> 
 

 
<g transform='translate(50,50)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#backward' width="30" height='30' x='0' y='0' /> 
 
</g> 
 

 
<g transform='translate(50, 100)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#back2' x='0' y='0' /> 
 
</g> 
 
</svg>

Wenn die Breite nicht gesetzt ist, wird der Standardwert von 100%, und das Symbol in das 100% x 30px Darstellungsfeld zentriert wird. Sie können das sehen, wenn wir eine Gliederung hinzufügen, die diese Box darstellt.

Hier bedeutet "100%" 100% der SVG-Breite. Dieser Wert ist 300px. Dies ist die Standardbreite, die Browser Elementen mit unbestimmter Breite geben.

<svg overflow="visible"> 
 
<defs> 
 
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol> 
 
</defs> 
 

 
<g transform='translate(50,50)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#backward' height='30' x='0' y='0' /> 
 
<rect width="100%" height="30" fill="none" stroke="red" /> 
 
</g> 
 

 
</svg>

Quelle

2016-06-27 09:37:26

Es sieht für mich wie das Symbol mit einem SVG-Editor wie Inkscape erstellt wurde, dann aber nicht richtig gereinigt. Gerade für solch ein einfaches Symbol sehe ich keinen Grund, kubische Bezier-Kurven mit bis zu 7 Dezimalstellen zu verwenden.

Ich würde vorschlagen, das Symbol neu zu bearbeiten, um seinen SVG-Code erheblich zu vereinfachen. Für eine einfache Pfeilspitze könnte man einfach ein <polyline> Element verwenden. Ein richtig definiertes Symbol ist erheblich einfacher zu <use> (yay Wortspiele!)

Quelle

2016-06-27 00:40:16

ich dachte ich, das als Platzhalter für andere Dinge während der Arbeit verwenden würde. Außerdem könnte mein eigener SVG-Pfad das gleiche Problem haben. Ich weiß auch nicht, wie man "aufräumt", und außerdem glaubst du wirklich, dass mein Problem damit zu tun hat, was in der "" steckt? (Ich bezweifle es, da der Pfad mit meiner zweiten Methode funktioniert.) – bongbang

Antwort

Verwandte Themen