html5 - antialiasing svg css



Come eseguire il rendering di elementi svg con bordi nitidi pur mantenendo l'anti-aliasing? (2)

Forse imposti la proprietà di rendering delle forme per l'elemento svg root.
È necessario impostare la proprietà di rendering di forma per ogni elemento di forma, come questo.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>

C'è un modo per rendere gli elementi svg con bordi nitidi pur mantenendo l'anti-aliasing?

Sto creando uno strumento basato su browser che funziona nei browser moderni.

Giocare con l'attributo shape-rendering non mi dà i risultati che sto cercando.

Voglio che i miei elementi abbiano un buon anti-aliasing in modo che i tracciati appaiano lisci come sotto con shape-rendering: auto :

Ma voglio anche elementi che non richiedono anti-aliasing, come la casella di partenza per apparire nitidi e nitidi , come quando sono renderizzati con rendering di shape-rendering: crispEdges :

È possibile? Sto cercando di avere la mia torta e di mangiarla anch'io?


Answer #1

Se vuoi che le tue scatole appaiano nitide senza sfocature dovute all'antialiasing, e senza usare la modalità crisp Edges, assicurati che i bordi delle linee siano ai limiti dei pixel. Quindi, per esempio, se le tue linee hanno un numero dispari di pixel, date loro delle coordinate che sono a 0,5 di un pixel.

<rect x="10.5" y="10.5" width="150" height="20" 
    stroke-width="1px" fill="none" stroke="black"/>

E sul confine se la larghezza del tratto è pari.

<rect x="10" y="10" width="150" height="20" 
    stroke-width="2px" fill="none" stroke="black"/>

Ovviamente, questo funziona davvero solo se SVG viene renderizzato a 1: 1. Cioè, non viene ridimensionato dal browser. E solo per le linee che sono orizzontali e verticali.





svg