SVG 线端不满足答案

【问题标题】：SVG line-ends don't meetSVG 线端不满足
【发布时间】：2013-07-14 11:03:44
【问题描述】：

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

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

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

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

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

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

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

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

希望你能帮我想出一些办法。提前致谢！

【问题讨论】：

标签： javascript svg antialiasing polyline

【解决方案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"/>

【讨论】：

【解决方案2】：

在 Chrome 中看起来不错：

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

那是"blending mode" called multiply，好像是only works in Opera。

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

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

【讨论】：

如果 feBlend 答案不使用 enable-background 和 BackgroundImage 关键字，它可能适用于其他浏览器。我认为 feBlend 在所有支持 svg 过滤器的浏览器中都实现了，但是如果没有BackgroundImage 支持，它会更难使用。
我已经研究了混合模式，现在我很确定它们可能会起作用，但不适用于我的情况，因为可能在这些线条部分的下方和上方还有其他元素会影响着色。颜色也是一个给定的值，我不能随意更改或操作
补充：我还必须支持所有浏览器和任何设备
@ModernMonkey "所有浏览器"，绝对不是 IE8。（另外，我猜，一种方法是将正常混合的白色放在相乘混合的下方）。