wie SVG Pixelfang zu behandeln

Ich versuche, zwei Svg-Linien mit Pfadelement zu rendern. Die erste Zeile hat 1px Breite und es ist scharf Die zweite Zeile hat 2px Breite und es ist verschwommen
Die Strichbreite ist für beide gleich. Wie dieswie SVG Pixelfang zu behandeln

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<path style="stroke-width:1;stroke:red;opacity:1;" d="M 300.5 250 L 300.5 300 "></path> 
<path style=" stroke-width:1;stroke:red;opacity:1;" d="M 350 250 L 350 300 "></path> 
</svg>

Quelle

2013-10-24 Karthik Yerramilly

Hauptsächlich fixieren ist es die 0,5-Offset, die die Linie scharf macht. By default, integer coordinates map to the intersections of the pixel squares. So a width-1 horizontal/vertical line is centered on the boundary between pixel rows and extends half way into the pixels on either side.

Um die zweite Zeile zu fixieren, fügen Sie entweder 0,5 zu den Koordinaten hinzu oder verwenden Sie den Stil shape-rendering: crispEdges. Beachten Sie, dass crispEdges Antialiasing verhindert, so dass horizontale/vertikale Linien scharf sind, aber gewinkelte Linien blockartig aussehen.

Auch stroke-width = 1 ist keine gültige CSS-Syntax. Das erste Beispiel stroke-width: 1 hat es richtig.

Quelle

2013-10-24 09:44:57

Vielen Dank. Ich habe die CSS-Syntax korrigiert. Es wurde versehentlich hinzugefügt. Deine Lösung hat für mich funktioniert. Falls diese Linien in einem bestimmten Winkel geneigt sind, sehen sie nach dem Einsatz der Crisp Edges nicht glatt aus, sondern sehen aus, als wären einige Stufen auf den Linien. Hast du irgendeine Lösung? Ich brauche Linien, die glatt und scharf sind, auch wenn sie gedreht oder gekippt werden. Kannst du auch diese Frage von mir beantworten http://stackoverflow.com/questions/17203352/div-within-svg-foreign-object-tag-is-not-transforming-when-it-has-an-opacity-0 –

Antwort

Verwandte Themen