Ширина линии в рафаэли

Question

Реально ли создать линию с весом 1 пиксель в SVG или Raphaeljs?

Следующий код

 var p = Paper.path("M1 1 L50 1");
 p.attr("stroke", "#D7D7D7");
 p.attr("stroke-width", "1");
 p.attr("opacity", 0.5);

рисовать линию, которая выглядит как 2px или 3px.Любая альтернатива?

Answer 1

Когда линии SVG лежат в своих, по-видимому, правильных координатах, они фактически лежат между пикселями, поэтому, когда вы указываете M1 1 L50 1, он рисует половину пикселя в верхней части, а другую половину в нижней части пикселя, делая его похожим на толстую , полупрозрачная линия.

Чтобы решить эту проблему, вам нужно либо закрасить половину пикселя, либо перевести ваши элементы на полпикселя, т.е. element.translate(0.5, 0.5)

Вы можете увидеть размытые и резкие линии здесь: http://jsfiddle.net/k8AKy/

Answer 2

Вам также следует использовать функцию Paper.renderfix(), поскольку вы не знаете, какой браузер будут использовать ваши пользователи.

Из документации

Исправленияпроблема Firefox и IE9 относительно субпиксельного рендеринга.Если бумага после переформатирования зависит от других элементов, она может сдвинуться на полпикселя, что приведет к потере четкости линий.Этот метод решает проблему.

Answer 3

По этой ссылке вы узнаете, что не так с целочисленными координатами и почему + 0,5 было исправлено размытие краев (с хорошими картинками !!):

• http://diveintohtml5.info/canvas.html#pixel-madness
• http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/

Сравните:

с + 0,5 :

Вы можете избежать + 0,5 :

SVG_Area.setAttribute("viewBox", "0.5 0.5 " + width + " " + height);

или оберткой:

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

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

или по:

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

которые влияют на все фигуры в вашем SVG-изображении ....