Question

我的问题很简单。我有两点，我想在它们之间划一条线。该线必须分为两个相同大小的部分。可悲的是，两端之间的中间没有相互连接。留下一个像素的间隙。

这种差距导致抗锯齿。两个元素的半透明边界“加起来”为白色间隙。

通过svg属性“shape-rendering =”crispEdges“”我可以关闭抗锯齿，消除了元素之间的差距，但这些线条只是“难看”，如下所示：{{3} }

       <polyline id="line2-part2" stroke="#225788" stroke-width="16" fill="none" points="678.5,124.5 498.5,137.5"/>
       <polyline id="line2-part1" stroke="#0064FF" stroke-width="16" fill="none" points="318.5,150.5 498.5,137.5"/>

这些是当前实现方式的行对象。它们完美地工作，除了它们之间的差距。

到目前为止我尝试过的解决方案：

- 围绕中点使线条重叠，但首先线条不再是完全笔直的，即使我可以解决这个问题，现在反抗现象会增加颜色，导致重叠像素出现“凹凸” 。（如果你想看看我的意思，可以用水平线试试）

- 用多边形替换线条，这可能有效，但我无法让角点计算足够精确

目前我能想出的最简单/最好的解决方案是让线对象停止“累加”到白色。简单来说，目前它是灰色+灰色=白色，但我想要灰色+灰色=黑色。但我不知道我是否可以让他们这样做或不这样做。

希望你能帮我提出一些建议。在此先感谢！

Answer 1

尝试在线条上添加方形线条。这会将线条拉伸到末端的一个微小的位置，通常会更直观地感觉线“应该”结束的位置。

   <polyline id="line2-part2" stroke-linecap="square" stroke="#225788" stroke-width="16" fill="none"  points="678.5,124.5 498.5,137.5"/>
   <polyline id="line2-part1" stroke-linecap="square" stroke="#0064FF" stroke-width="16" fill="none"  points="318.5,150.5 498.5,137.5"/>

Answer 2

在Chrome中看起来很正确：

[...]此刻它是灰色+灰色=白色，但我想要灰色+灰色=黑色。但我不知道我是否可以让他们这样做或热门这样做[...]

这是一个"blending mode" called multiply，似乎是only works in Opera。

如果您来自未来you may be able to use CSS：

<style>
   polyline { blend-mode: multiply; }
</style>

SVG线端不符合

2 个答案: