Responsiver SVG-Pfad ohne verzerrenden Strich

Ich habe einen einfachen SVG-Pfad mit einem Strich, dessen Größe ich mit dem Browserfenster anpassen möchte. Das Problem ist, dass der Strich verzerrt wird, wenn das Seitenverhältnis meiner Pfade geändert wird.

Dies ist der ursprüngliche Pfad links und die verzerrte Form rechts:

Geben Sie hier die Bildbeschreibung ein

Live-Beispiel (Größe Ihres Browsers ändern): http://codepen.io/Cai_/pen/pyBobP

Ich brauche das Rechteck, um ein einzelner Pfad mit einem Strich zu sein, damit ich stroke-dashoffset/ stroke-dasharrayetc. animieren kann.

Ich könnte Javascript verwenden, um den Pfad zu aktualisieren, aber ich würde gerne wissen, ob es eine Möglichkeit gibt, dies mit reinem SVG (und CSS) zu tun.

Kann ich einen responsiven SVG-Pfad erstellen, ohne den Strich zu dehnen oder zu verzerren?

Sie möchten also, dass der Abstand um das Weiß an den Seiten derselbe ist wie oben und unten? In Prozent, nehme ich an? Ich bin mir nicht sicher, ob ich verstehe, was Sie versuchen zu tun
Ja, ich möchte nicht, dass die Strichbreite verzerrt wird.
Kann dann Javascript verwenden, um das Attribut dynamisch hinzuzufügen, anstatt es bei komplexeren SVGs manuell zu jedem Pfad hinzuzufügen

Antworten (1)

Wie in diesem SO-Beitrag behandelt , sollten Sie verwenden vector-effect="non-scaling-stroke", um die Strichbreite unabhängig von der Skalierung gleich zu halten. Aktualisierte Demo

Responsiver SVG-Pfad ohne verzerrenden Strich
AntwortenHierDatenschutz-Bestimmungen1y, 0v