SVG线端不相交
我的问题很简单。我有两个点，我想在它们之间画一条线。这条线必须分成两个大小相同的部分。遗憾的是，两端在两点之间的中间不能相互连接。留下一个像素的间隙。
这种间隙是由抗锯齿造成的。这两个元素的半不透明边框“相加”成了一个白色的间隙。
通过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"/>这些是line对象的当前实现方式。除了它们之间的差距之外，它们都工作得很好。
到目前为止我尝试过的解决方案：
-rounding中点，使线重叠，但首先，线不再是完美的直线，即使我可以解决这个问题，反线现在增加了颜色，导致“凹凸”的重叠像素。(如果你想明白我的意思，可以试着用水平线)
-replacing线与多边形，这可以工作，但我不能得到足够精确的角点计算
目前我能想到的最简单/最好的解决方案是让lineobjects停止“加起来”到白色。简而言之，目前它是grey+grey=white，但我想要grey+grey=black。但我不知道我能不能让他们这么做。
希望你能帮我想出点什么。提前感谢！
回答 2
Stack Overflow用户
发布于 2013-07-18 18:46:21
尝试向线条添加正方形线条。这将使线条在末端略微展开，以使线条“应该”结束的位置通常更直观。
<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"/>Stack Overflow用户
发布于 2013-07-16 10:33:11
在Chrome中看起来不错：
...目前它是grey+grey=white，但我想要grey+grey=black。但我不知道我能不能让他们这么做，还是让他们这么做……
这是一个看起来像only works in Opera的"blending mode" called multiply。
如果你来自未来的you may be able to use CSS
<style>
polyline { blend-mode: multiply; }
</style>https://stackoverflow.com/questions/17673611
复制
腾讯云开发者
