Dans exemple1 ci-dessous est un extrait du code SVG en ligne inclus dans le document html. Remarquez viewbox="0 0 25 25""zoome" l'image dans le coin supérieur gauche de façon à ce qu'elle apparaisse plus grande que le deuxième exemple.L'attribut viewBox fonctionne-t-il sur les SVG inclus via l'étiquette IMG?
exemple 1
<svg
xmlns="http://www.w3.org/2000/svg"
width="200" height="200" viewbox="0 0 25 25"
>
<defs>
<style type="text/css">
.line-1 {
stroke: #0f7;
stroke-width: 2;
stroke-linecap: butt;
}
.line-2 {
stroke: #0fe;
stroke-width: 1.5;
stroke-linecap: square;
}
.line-3 {
stroke: #0ef;
stroke-width: 1;
stroke-linecap: round;
}
</style>
</defs>
<line
x1="13" y1="7" x2="44" y2="55"
class="line-1"
/>
<line
x1="6" y1="8" x2="61" y2="89"
class="line-2"
/>
<line
x1="2" y1="6" x2="65" y2="97.5"
class="line-3"
/>
</svg>Mais si l'on inclut ce SVG comme un fichier image viewbox ne fonctionne pas. Voir ci-dessous et notez comment l'image apparaît beaucoup plus zoomée même si viewbox="0 0 25 25" est toujours présent dans le fichier SVG lui-même.
exemple 2
<img width="200" height="200" src="http://svgur.com/i/2Wc.svg">Dans le deuxième exemple, le fichier SVG est le même code identique à celle du premier exemple. (ceci peut être vu ici: http://svgur.com/i/2Wc.svg [voir source]).
Il semble que viewbox soit ignoré dans le second exemple. Sauf si cela est considéré comme un comportement correct. Je ne sais pas. Si c'est un comportement correct, comment puis-je éditer viewbox dans le second exemple pour zoomer comme le premier? Y a-t-il une alternative?
@Paulie_D alors comment puis-je modifier le négatoscope sur le SVG original si inclus dans une image? Cela fonctionne sur SVG en ligne. – basement
@Paulie_D donc la réponse à cette question est Non. Vous êtes sûr qu'il n'y a aucun moyen de le faire sans une solution de contournement JavaScript? Alors la méthode de Normangorman peut être utile. – basement
@Paulie_D voir la réponse acceptée. C'est 'viewBox' au lieu de' viewbox' et cela fonctionne parfaitement. C'est très possible et grâce à une telle solution discrète. – basement