31

我正在使用 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是一个字符串变量，预先确定为“green”、“red”或“black”。

我的代码中是否有问题导致此问题，还是其他问题？

4

6 回答 6

59

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

另一种方法是将一些 CSS 应用于这些行：

.thelines{
    shape-rendering:crispEdges
}

关于形状渲染属性的规范章节。

于 2011-09-15T19:35:03.457 回答
29

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

于 2011-09-13T11:55:33.123 回答
21

可能有点晚了，但真正的原因是，当您在无限小的网格线上绘制时，笔画宽度为 1 的线会从网格左右（或上方/下方）呈现为半像素线。我通过使用变换 0.5,0.5 在所有对象周围添加一个组来解决此问题，因此所有内容都移动了半个网格线。

因此，您绘制的所有内容现在正好位于 2 条网格线的中间。笔画宽度为 1 的线条现在将在左侧有半个像素，在左侧有半个像素，但两者都从中间开始。产生一条与您想要的厚度完全一致的线：1 像素...

例子：

<g transform="translate(0.5,0.5)">
 <g>
   <path />
   <path />
 </g>
 <g>
   <path />
   <path />
 </g>
</g>
于 2012-09-19T21:02:42.230 回答
3

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

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

这使得线更细。

如果您想使用 CSS 实现相同的效果，请添加以下样式：

.the_Line_CLass{
  shape-rendering: crispEdges;
}
于 2017-08-10T07:10:16.857 回答
2

user616586 的回答似乎很好。

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

另外一个选项：

  • 使用 2px 的描边宽度（在形状外部渲染 1px，在形状内部渲染 1px）
  • 将形状作为剪辑路径应用于自身（删除外部 1px 的渲染）
于 2013-03-08T08:52:04.453 回答
0

使固定：

<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-horizo​​ntal-line-not-visible-in.html

于 2016-09-13T07:32:52.263 回答