Como desenhar os elementos svg com arestas estaladiças ao mesmo tempo que mantém o anti-aliasing?

Existe uma maneira de renderizar elementos svg com bordas crocantes enquanto ainda mantém anti-aliasing?

Estou a criar uma ferramenta baseada em browser que funciona em navegadores modernos.

brincar com o atributo renderização de forma não me dá os resultados que procuro.

quero que os meus elementos tenham uma suavização para que os caminhos pareçam lisos como em baixo com shape-rendering: auto:

enter image description here

Mas também quero elementos que não necessita de um anti-aliasing, como a caixa Inicial para ficar afiada e estaladiça , como quando rendida com shape-rendering: crispEdges:

enter image description here

Isto é possível? Também quero comer o meu bolo?

 52
html5svg
Author: brice, 2014-03-04
Source

3 answers

Talvez tenhas definido a propriedade de representação de formas para o elemento svg raiz.
Você deve definir a propriedade de renderização de forma para cada elemento de forma, como este.

<?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>
 59
Author: defghi1977, 2014-12-14 13:36:11

Se quiser que as suas caixas apareçam afiadas sem qualquer desfocação devido à suavização, e sem usar o modo crispEdges, certifique-se que as arestas das linhas estão nos limites dos pixels. Então, por exemplo, se suas linhas são um número ímpar de pixels de largura, dê-lhes coordenadas que estão em 0.5 de um pixel.

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

E no limite, se a largura do traço for igual.

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

Claro, isto só funciona realmente se o seu SVG estiver a ser renderizado às 1:1. Isto é, não está a ser resgatado pelo navegador. E apenas para linhas horizontais e verticais.

 19
Author: Paul LeBeau, 2014-03-04 09:27:06
[[[3]] eu estou postando isso como uma resposta ao invés de um comentário, porque eu quero postar uma foto. Caso contrário, este é um comentário sobre o post útil de @defghi1977 . +1 para ele, a propósito.] 
<?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" />
    <rect x="10" y="50" width="150" height="20" shape-rendering="auto" 
          fill="none" stroke="black" />
    <path d="M40,30l100,100" shape-rendering="crispEdges" 
          stroke="black" stroke-width="5" />
    <path d="M80,30l100,100" shape-rendering="auto" 
          stroke="black" stroke-width="5" />
</svg>

Produzido

enter image description here

Isto foi renderizado pelo Firefox 38.0.5 .
No Internet Explorer 11, ambas as configurações produzem o mesmo resultado com anti-aliasing e não crisp.
 7
Author: Nick Alexeev, 2017-05-23 12:34:25