web-dev-qa-db-fra.com

Comment rendre des éléments svg avec des bords nets tout en conservant l'anti-aliasing?

Y a-t-il un moyen de rendre des éléments svg avec des bords nets tout en conservant l'anti-aliasing?

Je crée un outil basé sur un navigateur qui fonctionne dans les navigateurs modernes.

Jouer avec l'attribut rendu de forme ne me donne pas les résultats que je cherche.

Je veux que mes éléments soient anti-aliasing afin que les chemins soient lisses comme ci-dessous avec shape-rendering: auto:

enter image description here

Mais je veux aussi que les éléments qui ne nécessitent pas d’anti-aliasing, comme la zone de démarrage , aient un aspect net et net , comme lors du rendu avec shape-rendering: crispEdges:

enter image description here

Est-ce possible? Est-ce que je cherche à avoir mon gâteau et à le manger aussi?

html5svg
62
brice

Peut-être que vous définissez la propriété de rendu de forme pour l’élément racine svg.
Vous devez définir la propriété de rendu de forme pour chaque élément de forme, comme ceci.

<?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>
71
defghi1977

Si vous souhaitez que vos boîtes apparaissent nettes sans être floues en raison de l'anticrénelage, et sans utiliser le mode crispEdges, assurez-vous que les bords des lignes sont situés sur des limites de pixels. Ainsi, par exemple, si vos lignes ont un nombre impair de pixels, indiquez-leur des coordonnées situées à 0,5 pixel.

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

Et sur la limite si la largeur du trait est égale.

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

Bien sûr, cela ne fonctionne vraiment que si votre SVG est rendu à 1: 1. Autrement dit, le navigateur ne redimensionne pas le résultat. Et seulement pour les lignes horizontales et verticales.

22
Paul LeBeau

[Je poste ceci comme une réponse plutôt que comme un commentaire, parce que je veux poster une photo. Sinon, ceci est un commentaire sur le article utile de @ defghi1977 . +1 à lui, au fait.]

<?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>

Produit

enter image description here

Ceci a été rendu par Firefox 38.0.5.
Dans Internet Explorer 11, les deux shape-rendering Le réglage produit le même résultat avec anti-aliasing et non net.

9
Nick Alexeev