Spécification des valeurs de l'attribut d du chemin d'accès en pourcentage

Question

Comment puis-je utiliser des valeurs en pourcentage pour l'attribut d d'un indicateur path?

Par exemple:

<path stroke-width="4" d="M1% 10% l100% 0" /> 

ne fonctionne pas.

Puisque je veux réutiliser les éléments dans svg tag sur le changement de la taille de svg, je cherche des valeurs absolues (en pourcentage).

Merci à l'avance ..

Answer 1

données de chemin SVG ne permettent nombres adimensionnels, période.

Si vous voulez changer la taille d'un chemin, vous le ferez avec les attributs transform ou en créant une nouvelle fenêtre. Par exemple, vous pouvez envelopper votre chemin avec un élément <svg> dans votre <svg> externe:

<svg ...> 
    <svg viewBox="0 0 100 100" x="0" y="10%" width="100%" height="100%"> 
     <path stroke-width="4" d="M1 10 l100 0" /> 
    </svg> 
</svg> 

Il vous permet de définir le chemin que les coordonnées de valeurs absolues. Le <svg> intérieur définit un viewBox de sorte que le chemin l'enjambe à la quantité que vous voulez. Le dimensionnement et le positionnement relatifs sont alors possibles avec les attributs x, y, width et height.

Si vous souhaitez réutiliser le même élément plusieurs fois, vous pouvez faire la même chose avec <symbol> (un modèle qui ne sera pas rendu lui-même) et <use> éléments y faisant référence:

<svg ...> 
    <symbol id="myPath" viewBox="0 0 100 100"> 
     <path stroke-width="4" d="M1 10 l100 0" /> 
    </symbol> 
    <!-- with relative sizes --> 
    <use xlink:href="#myPath" width="100%" height="100%" /> 
    <!-- with absolute sizes --> 
    <use xlink:href="#myPath" width="200" height="160" /> 
    <!-- using transforms --> 
    <use xlink:href="#myPath" transform="translate(50, 0) scale(3.5)" /> 
</svg>