web-dev-qa-db-fra.com

Largeur de trait fixe en SVG

Je voudrais pouvoir définir la largeur de trait sur un élément SVG pour qu'il soit "sensible aux pixels", c'est-à-dire toujours d'une largeur de 1px, quelles que soient les transformations d'échelle actuelles appliquées. Je suis conscient que cela pourrait bien être impossible, car tout l'intérêt de SVG est d'être indépendant des pixels.

Le contexte suit:

J'ai un élément SVG avec son ensemble d'attributs viewBox et preserveAspectRatio. Cela ressemble à 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 redimensionne cet élément, les formes réelles à l'intérieur se mettent à l'échelle en conséquence (jusqu'à présent, tout va bien).

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

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

Encore une fois, cela fonctionne bien. Idéalement, cependant, cet axe n'aurait toujours qu'une largeur de 1px. Je n'ai aucun intérêt à ce que les axes deviennent plus gros lorsque je redimensionne l'élément svg parent.

Alors je suis foutu?

svgvisualization
96
wxs

Vous pouvez utiliser la propriété vector-effect Définie sur non-scaling-stroke, Voir la documentation . Une autre façon consiste à utiliser transform(ref) .

Cela fonctionnera dans les navigateurs qui prennent en charge les parties de SVG Tiny 1.2, par exemple Opera 10. La solution de rechange comprend l'écriture d'un petit script pour faire la même chose, en inversant essentiellement la CTM et en l'appliquant sur les éléments cela ne devrait pas évoluer.

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

118
Erik Dahlström