Discussion :

[sbernard]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[laurent1133]

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

[Azerx]

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!

[NoSmoking]

Bonjour,
attention à la confusion

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#svg_1 {
 width :12px;
 height:10px;
}
#svg_2 {
 width :200px;
 height:100px;
}

et

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>