Raphael.js中的线宽 [英] Line width in raphaeljs

问题描述

在SVG或raphaeljs中以1px的粗细对齐是真的吗?

Is it real to make line with 1px weight in SVG or 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.还有其他选择吗?

draw line which looks like 2px or 3px. Any alternative?

推荐答案

当SVG线位于其看上去正确的坐标处时，它们实际上位于像素之间，因此当您声明M1 1 L50 1时，它在顶部绘制了半个像素，另一个在顶部绘制了半个像素.像素底部的一半，使其看起来像一条粗的半透明线.

When SVG lines lie at their apparently correct coordinates they actually lie inbetween pixels, so when you state M1 1 L50 1 it paints half a pixel on the top and the other half in the bottom of the pixel, making it look like a thick, semitransparent line.

要解决此问题，您需要以半像素绘制，或将元素转换为半像素，即. element.translate(0.5, 0.5)

To solve this problem you need to either paint at half pixels, or translate your elements half a pixel, ie. element.translate(0.5, 0.5)

您可以在此处看到模糊和清晰的线条: http://jsfiddle.net/k8AKy/

You can see the blurry and sharp lines here: http://jsfiddle.net/k8AKy/

这篇关于Raphael.js中的线宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！