Wie macht man Element in Svg nicht von Viewbox gestreckt?

Dieses Beispiel zwei Kreis in einem Kasten 10 x 10.Wie macht man Element in Svg nicht von Viewbox gestreckt?

<svg width="10" height="10" viewbox="0 0 10 10"> 
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A--> 
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
</svg>

Kreis A gleiche Größe bemessen zeichnen, wie Kreis B. Angenommen habe ich die svg zu 100 x 100 so ändern möchten:

<svg width="100" height="100" viewbox="0 0 10 10"> 
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A--> 
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
</svg>

Die Größe der Kreise wird in der Größe angepasst. Wie man ein bestimmtes Element innerhalb von svg macht, sagen wir nur Kreis A, so dass es nicht auf die Größenänderung wirkt.

Quelle

2017-02-16 smftr

Verwenden Sie zwei SVG-Elemente, von denen eines keine ViewBox hat. Platzieren Sie sie mithilfe der CSS-Positionierung übereinander. –

@RobertLongson Ich kann diese Lösung verwenden, aber es muss die Größe meines cx und cy-Objekts abhängig von der Svg Breite und Höhe, nicht wahr? Gibt es bessere Lösungen? da mein eigentlicher Code komplex ist – smftr

Ich habe keine Ahnung was dein erster Satz bedeutet. –

Ich machte eine andere Probe. Ich benutze verschachtelte Svg-Elemente, um den Effekt von viewBox zu teilen. Sie können die relative Position von Formknoten mithilfe eines Prozentwerts festlegen, diese Methode ist jedoch für allgemeine Pfadformen nicht hilfreich. Seit dem verwende ich "Use" -Element, um Formdefinition und Positionierung zu teilen.

<svg width="100" height="100"> 
    <defs> 
     <!--shape definition--> 
     <circle r="2" fill="red" id="circleA"/> <!-- circle A--> 
    </defs> 
    <!--parcentage positioning by viewport--> 
    <use x="20%" y="20%" xlink:href="#circleA"/> 
    <svg viewBox="0 0 10 10"> 
     <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
    </svg> 
</svg>

Quelle

2017-02-17 01:55:40 defghi1977

danke, es ist was ich brauche – smftr

Meinst du das?

<svg width="100" height="100" viewbox="0 0 10 10"> 
    <rect x="2" y="2" width="0.001" height="0.001" 
     stroke="red" stroke-width="4" stroke-linejoin="round" 
     vector-effect="non-scaling-stroke"/> <!-- circle A--> 
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
</svg>

Aber ich weiß nicht, jeder Browser unterstützt Vektor-Effekt-Eigenschaft.

Quelle

2017-02-16 21:28:48 defghi1977

gibt es ein Attribut wie "Vektor-Effekt =" Nicht-Skalierung-Breite-und-Strich "? Die Größe des Rect wird skaliert, wenn Svg Breite und Höhe geändert werden. – smftr

Kein UA hat irgendeinen anderen Vektor-Effekt implementiert. –

Wie macht man Element in Svg nicht von Viewbox gestreckt?

Antwort

Verwandte Themen