Fixe la largeur du trait en SVG

Je voudrais être en mesure de définir la largeur du trait sur un élément SVG pour être "pixel-conscient", c'est toujours 1px de large, quel que soit le courant de mise à l'échelle des transformations appliquées. Je suis conscient que c'est peut-être impossible, puisque le point de l'ensemble de SVG est à pixel indépendant.

Contexte suit:

J'ai un élément SVG avec ses négatoscopes et preserveAspectRatio attributs définis. Il 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 l'échelle de cet élément, le réel de formes à l'intérieur de l'échelle en conséquence (jusqu'ici tout va bien).

Comme vous pouvez le voir, j'ai mis en place la viewBox, de sorte que l'origine est au centre. Je voudrais attirer un x et un axe y à l'intérieur de cet élément, auquel je n'ainsi:

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

Encore une fois, cela fonctionne bien. Idéalement, cependant, cet axe serait toujours seule 1px de large. Je n'ai aucun intérêt dans les axes deviennent plus gros quand je l'échelle le parent de l'élément svg.

Je suis vissé?

InformationsquelleAutor wxs | 2009-08-19
  1. 115

    Vous pouvez utiliser le vector-effect propriété définie à non-scaling-stroke, voir les docs. Une autre façon est d'utiliser des transformation(ref).

    Qui fonctionne dans les navigateurs qui prennent en charge les parties de SVG Tiny 1.2, par exemple Opera 10. Le secours comprend écrit un petit script pour faire de même, fondamentalement, l'inversion de la marque communautaire et en l'appliquant sur les éléments qui ne le sont pas à l'échelle.

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

    • Malheureusement, c'est dans une application XUL, et qui ne semble pas à vecteurs de support à effet encore. Oh bien.
    • Cela devrait apparaître dans Firefox 15 tout se passe bien donc, vous devriez être en mesure de l'utiliser une fois que vous construisez votre application XUL sur gecko 15.
    • IE11 n'est toujours pas en charge vector-effect de la propriété. Est-il possible d'obtenir le même effet que vector-effect: non-scaling-stroke dans IE11?
    • oui, avec js il est possible d'émuler cette dans IE.
    • Tu veux dire l'inversion de la marque communautaire et en l'appliquant sur les éléments qui ne le sont pas? Mais la course n'est pas représenter par élément. Comment puis-je appliquer l'inversion à elle? Serait génial si vous pouvez fournir un extrait de code pour l'illustrer. Merci à l'avance.
    • clone de l'élément (réglage fill à none et vice versa pour le stroke), de calculer, & définir les transformations (un pour le remplissage de la partie et l'autre pour le contour de la partie). Ça va être un peu désordonné, mais n'est - ce pas, vous pourriez également demander à Microsoft d'ajouter le support. En tout cas, je pense que votre question mérite d'être une question de sa propre.
    • serait-il possible pour vous de montrer un peu de code qui permet d'obtenir ce que vous avez décrit dans le dernier commentaire?
    • Si cette approche de travail avec le zoom du navigateur, ou seulement SVG mise à l'échelle des transformations?

    InformationsquelleAutor Erik Dahlström