Correction de la largeur du trait en SVG

Question

J'aimerais pouvoir définir la largeur du trait d'un élément SVG de manière à ce qu'il tienne compte des pixels, c'est-à-dire qu'il ait toujours une largeur de 1 pixel, quelles que soient les transformations d'échelle appliquées. Je suis conscient que cela pourrait bien être impossible, puisque le but de SVG est d'être indépendant des pixels.

Le contexte suit :

J'ai un élément SVG dont les attributs viewBox et preserveAspectRatio sont définis. Cela ressemble à quelque chose comme ceci

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

Cela signifie que lorsque je mets cet élément à l'échelle, les formes qu'il contient sont mises à l'échelle en conséquence (jusqu'à présent, tout va bien).

Comme vous pouvez le voir, j'ai configuré le viewBox de sorte que l'origine soit au centre. Je voudrais dessiner un axe x et un axe y dans cet élément, ce que je fais ainsi :

<line x1="-1000" x2="1000" y1="0" y2="0" />

Là encore, cela fonctionne bien. Idéalement, cependant, cet axe devrait toujours avoir une largeur de 1px. Je n'ai aucun intérêt à ce que les axes grossissent lorsque je mets à l'échelle l'élément svg parent.

Alors je suis foutu ?

Answer 1

Vous pouvez utiliser le vector-effect la propriété est réglée sur non-scaling-stroke voir les docs . Un autre moyen consiste à utiliser transform(ref) .

Cela fonctionnera dans les navigateurs qui supportent ces parties de SVG Tiny 1.2, par exemple Opera 10. La solution de repli comprend l'écriture d'un petit script pour faire la même chose, en inversant essentiellement la MCT et en l'appliquant sur les éléments qui ne devraient pas être mis à l'échelle.

Si vous voulez des lignes plus nettes, vous pouvez aussi désactiver l'anticrénelage ( shape-rendering=optimizeSpeed o shape-rendering=crispEdges ) et/ou jouer avec le positionnement.

Answer 2

Voici une réponse plus concise basée sur la réponse d'Erik pour vous aider à démarrer rapidement.

<div style="background: blue; width: 100%; height: 130px;">
            <svg xml:id="root" viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="none">
                <rect xml:id="r" vector-effect="non-scaling-stroke" x="0" y="0" width="100" height="100" fill="none" stroke="#88CE02"
                      stroke-linecap="square" stroke-width="10" stroke-miterlimit="30"/>
            </svg>
        </div>

Ajout de la vector-effect="non-scaling-stroke" au rectangle SVG rend la taille de la bordure (ou du trait) fixe.