1

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

这个间隙结果形成了抗锯齿。两个元素的半不透明边界“加起来”形成一个白色间隙。

通过 svg 属性“shape-rendering="crispEdges"”，我可以关闭消除元素之间间隙的抗锯齿，但是线条只是“丑陋”，如下所示：http: //jsfiddle.net /GsczH/

       <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"/>

这些是当前实现方式的线对象。除了它们之间的差距外，它们工作得很好。

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

- 将中间点四舍五入以使线条重叠，但首先线条不再完全笔直，即使我可以解决这个问题，抗锯齿现在也会将颜色相加，从而导致重叠像素上的“凹凸”。（如果您想了解我的意思，请尝试使用水平线）

- 用多边形替换线条，这可以工作，但我无法获得足够精确的角点计算

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

希望你能帮助我想出一些东西。提前致谢！

4

2 回答 2

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"/>
于 2013-07-18T18:46:20.830 回答
0

在 Chrome 中看起来不错：

                                     

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

这是一种称为 multiply 的“混合模式”，它似乎只适用于 Opera。

如果您来自未来，您可以使用 CSS：

<style>
   polyline { blend-mode: multiply; }
</style>
于 2013-07-16T10:33:10.867 回答