Position de <use> svg path

Je dois positionner un chemin d'icône que j'ai obtenu de quelque part sur Internet (bientôt remplacé par le mien). Ma première tentative en utilisant <symbol> en conjonction avec <use> ne me donne pas ce que je veux malgré un bricolage significatif (l'icône ne rentrera pas dans le carré dans l'exemple ci-dessous). Ensuite, j'ai trouvé que l'utilisation de <g> au lieu de <symbol> fera l'affaire, mais au prix d'une mise à l'échelle manuelle du chemin moi-même. Depuis la mise à l'échelle automatique est plus agréable, il devrait y avoir un moyen de positionner avec précision <symbol>.Position de <use> svg path

La W3 specs mentionnent les différents comportements de <use> selon que la référence est <symbol>, <svg>, ou autrement, mais qui vole juste au-dessus de ma tête.

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

Source

2016-06-27 bongbang

Vous avez juste besoin d'ajouter width="30" à votre référence <use>.

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

Lorsque la largeur est pas définie, la valeur par défaut de 100% et le symbole étant centrée en ce que 100% x 30px fenêtre. Vous pouvez voir que si nous ajoutons un contour représentant cette boîte.

Ici, "100%" signifie 100% de la largeur SVG. Cette valeur est 300px, qui est la largeur par défaut que les navigateurs donnent aux éléments de largeur indéterminée.

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

Source

2016-06-27 09:37:26

Il me semble que le symbole a été créé avec un éditeur SVG comme Inkscape, mais pas correctement nettoyé. Surtout pour un symbole aussi simple, je ne vois aucune raison d'utiliser des courbes cubiques-Bézier avec jusqu'à 7 décimales de précision.

Je suggère de retravailler le symbole pour simplifier considérablement son code SVG. Pour une tête de flèche de base comme ça, vous pouvez même simplement utiliser un élément <polyline>. Un symbole correctement défini sera beaucoup plus facile à <use> (yay puns!)

Source

2016-06-27 00:40:16

Je pensais que je l'utiliser comme un espace réservé tout en travaillant sur d'autres choses. En outre, mon propre chemin SVG pourrait bien avoir le même problème. Je ne sais pas comment "nettoyer" non plus, et d'ailleurs croyez-vous vraiment que mon problème a à voir avec ce qu'il y a dans le ''? (J'en doute, puisque le chemin fonctionne comme il se doit avec ma deuxième méthode.) – bongbang

Position de <use> svg path

Répondre

Questions connexes