SVG et positionnement en px

Bonjour,

Je suis tombé sur le code ci-dessous et j'aurais voulu savoir et à quoi correspond un positionnement ou largeur en pixel mais avec une partie décimale, exemple : width="11.26px". A quoi correspond ".26" ?
D'avance merci pour vos retours.
Stéphane.

Code:

---

1 2 3 4 5 6 7 8

<svg version="1.1" class="iconic iconic-signal" xmlns="http://www.w3.org/2000/svg" xmlns : xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.26px" height="8px" viewBox="0 0 11.26 8" enable-background="new 0 0 11.26 8" xml:space="preserve"> <path class="iconic-signal-base" d="M6.337,7.247c-0.391-0.391-1.023-0.391-1.414,0l0.708,0.708L6.337,7.247z"/> <g class="iconic-signal-wave"> <path class="iconic-signal-wave-inner" fill="none" stroke="#000000" stroke-miterlimit="10" d="M7.62,5.966c-1.098-1.098-2.88-1.098-3.977,0"/> <path class="iconic-signal-wave-middle" fill="none" stroke="#000000" stroke-miterlimit="10" d="M9.31,4.275C7.278,2.244,3.984,2.245,1.952,4.276"/> <path class="iconic-signal-wave-outer" fill="none" stroke="#000000" stroke-miterlimit="10" d="M10.9,2.684c-2.911-2.911-7.629-2.911-10.54,0"/> </g> </svg>

---

Je pense que c'est une erreur, un pixel est un pixel tu ne peux pas le diviser ! http://devdocs.io/svg/

Citation:

---

Envoyé par laurent1133

Je pense que c'est une erreur, un pixel est un pixel tu ne peux pas le diviser ! http://devdocs.io/svg/

---

Très probable!

Bonjour,
attention à la confusion

Code:

---

<svg ...width="11.26px" height="8px"...

---

ici on déclare la largeur/hauteur de la zone d'affichage

Code:

---

...viewBox="0 0 11.26 8"...

---

ici on déclare la position et dimension de l'élément SVG dessiné.

Dans ce cas une unité de l'élément SVG correspond à 1 pixel écran...

si on met le viewport à, par exemple,

Code:

---

<svg ...width="1126px" height="800px"...

---

soit 100 fois plus grand la viewBox elle restera la même, dans ce cas une unité de l' élément SVG vaudra

• largeur : 1126/11.26 = 100 pixels écran
• hauteur : 800/8 = 100 pixels écran

l'élément SVG conservera proprement ses proportions initialement calculées, il n'est qu'a voir les valeurs avec décimales des <path>.

Dans le cas présent la valeur sur la zone d'affichage mise à 11.26 aurait pu être mise à 12px sans aucun problème, il n'est qu'à faire l'essai avec

Code:

---

1 2 3 4 5 6 7 8

#svg_1 { width :12px; height:10px; } #svg_2 { width :200px; height:100px; }

---

et

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<svg id="svg_1" version="1.1" class="iconic iconic-signal" xmlns="http://www.w3.org/2000/svg" xmlns : xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11.26 8" enable-background="new 0 0 11.26 8" xml:space="preserve"> <g class="iconic-signal-wave"> <path class="iconic-signal-base" d="M6.337,7.247c-0.391-0.391-1.023-0.391-1.414,0l0.708,0.708L6.337,7.247z"/> <path class="iconic-signal-wave-inner" fill="none" stroke="#000000" stroke-miterlimit="10" d="M7.62,5.966c-1.098-1.098-2.88-1.098-3.977,0"/> <path class="iconic-signal-wave-middle" fill="none" stroke="#000000" stroke-miterlimit="10" d="M9.31,4.275C7.278,2.244,3.984,2.245,1.952,4.276"/> <path class="iconic-signal-wave-outer" fill="none" stroke="#000000" stroke-miterlimit="10" d="M10.9,2.684c-2.911-2.911-7.629-2.911-10.54,0"/> </g> </svg> <svg id="svg_2" version="1.1" class="iconic iconic-signal" xmlns="http://www.w3.org/2000/svg" xmlns : xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 11.26 8" enable-background="new 0 0 11 8" xml:space="preserve"> <g class="iconic-signal-wave"> <path class="iconic-signal-base" d="M6.337,7.247c-0.391-0.391-1.023-0.391-1.414,0l0.708,0.708L6.337,7.247z"/> <path class="iconic-signal-wave-inner" fill="none" stroke="#000000" stroke-miterlimit="10" d="M7.62,5.966c-1.098-1.098-2.88-1.098-3.977,0"/> <path class="iconic-signal-wave-middle" fill="none" stroke="#000000" stroke-miterlimit="10" d="M9.31,4.275C7.278,2.244,3.984,2.245,1.952,4.276"/> <path class="iconic-signal-wave-outer" fill="none" stroke="#000000" stroke-miterlimit="10" d="M10.9,2.684c-2.911-2.911-7.629-2.911-10.54,0"/> </g> </svg>

---