Wie stelle ich eine Strichbreite ein: 1 nur auf bestimmten Seiten von SVG-Formen?

Festlegen einer Strichbreite: 1 für ein <rect>Element in SVG platziert einen Strich auf jeder Seite des Rechtecks.

Wie platziert man eine Strichbreite auf nur drei Seiten eines SVG-Rechtecks?

— user782860
quelle

Antworten:

166

Wenn Sie einen Strich oder keinen Strich benötigen, können Sie dazu auch Strich-Dasharray verwenden, indem Sie die Striche und Lücken an die Seiten des Rechtecks anpassen .

rect { fill: none; stroke: black; }
.top { stroke-dasharray: 0,50,150 }
.left { stroke-dasharray: 150,50 }
.bottom { stroke-dasharray: 100,50 }
.right { stroke-dasharray: 50,50,100 }

<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

Erweitern Sie das Snippet

Siehe jsfiddle .

— Erik Dahlström
quelle

Wie können wir den Strich nur über dem rechten Element anzeigen?

— Suresh

Können Sie erklären, warum bestimmte Zahlen an bestimmten Positionen diesen Effekt bewirken?

— JacobIRR

@JacobIRR bezieht sich auf die Definition der Eigenschaft 'Stroke-Dasharray' (in der Antwort verlinkt). Die Idee hier ist, die Strichlängen an die Seiten des Rechtecks und den Strichspalt an die Seite anzupassen, die keinen Strich haben sollte.

— Erik Dahlström

Ich habe gerade Ihre Lösung aktualisiert, in diesem Link codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

Hier ist eine programmatische Lösung, stroke-dasharraydie ein bestimmtes Objekt generiert, das definiert, welche Ränder angezeigt werden sollen. Das Lesen des Codes kann Ihnen helfen, die Funktionsweise zu verstehen: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

Sie können den visuellen Stil verschiedener Teile einer einzelnen Form in SVG nicht ändern (ohne das noch nicht verfügbare Vektoreffektmodul ). Stattdessen müssen Sie für jeden Strich oder jeden anderen visuellen Stil, den Sie variieren möchten, separate Formen erstellen.

Speziell für diesen Fall stattdessen eine der Verwendung <rect>oder <polygon>Element können Sie eine erstellen <path>oder <polyline>dass deckt nur drei Seiten des Rechtecks:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

Sie können die Wirkung dieser in Aktion hier sehen: http://jsfiddle.net/b5FrF/3/

Rotes Quadrat mit Strich auf drei Seiten

Weitere Informationen finden Sie in den <polyline>leistungsstärkeren, aber verwirrenderen <path>Formen.

— Phrogz
quelle

Sie könnten eine Polylinie für die drei gestrichenen Seiten verwenden und den Strich überhaupt nicht auf das Rechteck setzen. Ich glaube nicht, dass Sie mit SVG unterschiedliche Striche auf verschiedene Teile eines Pfads / einer Form anwenden können. Sie müssen also mehrere Objekte verwenden, um den gleichen Effekt zu erzielen.

— wdebeaum
quelle