Question

我正在使用svg创建股票图表，当我将路径元素的笔划宽度设置为1时，我遇到了问题。它不会使线条更窄，而是使其与笔划的大小相同 - 宽度：2但略透明。我不能发布它的图像，因为我没有足够的声誉点...

我的svg标签看起来像这样：

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

我正在使用javascript / jquery动态添加路径元素：

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

我遗漏了路径d属性的值，因为它有点长。此外，color是一个字符串变量，它在前面被确定为“绿色”，“红色”或“黑色”。

我的代码中是否存在导致此问题的错误或是否是另一个问题？

Answer 1

如果直线水平或垂直，只需将线条放置半个像素，例如x="1.5px"。

另一种方法是在行中应用一些CSS：

.thelines{
    shape-rendering:crispEdges
}

The spec chapter on shape-rendering property.

Answer 2

这可能是由于大多数SVG实现中应用了抗锯齿。当线宽接近或低于1时，抗锯齿使得半覆盖像素呈现部分不透明。使用默认的变换和视口，您的单像素线可能恰好位于两个物理像素之间的边界上，因此它们各自被覆盖一半，从而导致整体透明度达到50％。在白色背景上使用黑色线条会产生50％的灰色。

Answer 3

可能有点晚了，但真正的原因是当你画一个无限小的网格线时，行程宽度为1的线被渲染为左右半边（或上/下）的半像素从网格线。我通过在变换0.5,0.5的所有对象周围添加一组来解决这个问题，所以一切都移动了半个网格线。

因此，您绘制的所有内容现在都位于两个网格线之间。行程宽度为1 wil的行现在左边有半个像素，左边有半个像素，但是从中间开始。得到的线条与您想要的厚度完全相同：1像素......

示例：

<g transform="translate(0.5,0.5)">
 <g>
   <path />
   <path />
 </g>
 <g>
   <path />
   <path />
 </g>
</g>

Answer 4

如果它的D3js然后尝试将以下样式属性添加到你的d3元素：

.style('shape-rendering','crispEdges')

这使得线条更薄。

如果你想用CSS实现相同的功能，那么添加以下样式：

.the_Line_CLass{
  shape-rendering: crispEdges;
}

Answer 5

user616586的回答似乎很好。

我看到的问题是线条与形状中心的距离不同，因为其中一条偏移了1像素。在大多数情况下，这可能是可以接受的，但有时却不是。

另一种选择：

使用2px的笔触宽度（在外部渲染1px，在形状内部渲染1px）
将形状作为剪辑路径应用于自身（删除外部1px的渲染）

Answer 6

修正：

<line
  x1="10" y1="1"
  x2="90" y2="1.0001" // hack: horizontal line in SVG not visible in Chrome
  stroke="#FF0000"
  strokeWidth="1"/>

参考：http://code.tonytuan.org/2016/09/svg-horizontal-line-not-visible-in.html

为什么SVG笔划宽度：1使线条透明？

6 个答案: