Bordures floues en SVG (Raphael.js)

Je travaille sur un éditeur basé sur le Web où l'on peut faire glisser et redimensionner des éléments. J'ai eu un problème concernant l'affichage des bordures et des éléments 1px: au lieu de l'affichage pixel-to-pixel (par ex. Ligne 1px solide), j'ai une ligne floue.

J'ai constaté que si j'utilise des coords avec .5 à la fin (par ex. 10.5, 124.5) et des tailles entières, tout est parfait pour les pixels.

Voici les exemples. L'élément avant j'ai changé ses coords: Http://cl.ly/2k1Y3b1M0V1V3h321Y2C

Et après (avec ".5" à la fin de chaque taille entière): Http://cl.ly/39422q3P453u1o3R2j3W

La question est de savoir comment puis-je forcer Raphael.js à afficher tout en pointillé?

Je ne sais pas comment faire cela à Raphaël, mais un peu de CSS pourrait vous aider:

.your_lines { shape-rendering: crispEdges; }

Fondamentalement, il désactive l'antialiasing pour les lignes, et les lignes qui ne sont pas horizontales ou verticales peuvent ne pas être très jolies.

Mais vous préférez probablement ajouter 5 pour les coordonnées des lignes, car les navigateurs font ce qu'on leur dit: la ligne est sur les coordonnées exactes et la course est peinte des deux côtés de la ligne, un demi pixel ici et un demi-pixel Là.

Ces liens vous indiquent ce qui ne va pas avec les coordonnées entières et pourquoi +0.5 a été corrigé flou flou (avec de belles photos !!):

Vous pouvez éviter +0.5 par:

 SVG_Area.setAttribute ("viewBox", "0.5 0.5" + largeur + "" + hauteur);

Ou par enveloppe:

 Fonction fiXY (x) {return parseInt (x) + 0.5;  }

 Var rect = document.createElementNS (SVGobj.svgNS, "rect");
 Rect.setAttribute ("x", fiXY (x));
 Rect.setAttribute ("y", fiXY (y));

Ou par:

 SVG_Area.setAttribute ("shape-rendering", "crispEdges");

Quel effet sur toutes les formes de votre image SVG ….

Sur la base de la réponse de @gavenkoa, vous pouvez le faire avec Raphael :

 var paper = Raphael('#container'); if (Raphael.svg) { paper.setViewBox(0.5, 0.5, paper.width, paper.height); }

Notez que Raphael.svg vérifiez que vous ne devriez pas appliquer le changement de 0.5px à IE <= 8 (où VML est utilisé).