SVG 라인 엔드가 맞지 않습니다

Question

내 문제는 아주 간단합니다. 두 점이 있는데 두 점 사이에 선을 그립니다. 선은 같은 크기의 두 부분으로 나누어 져야합니다. 슬프게도 양쪽 끝은 두 지점 사이의 중간에 서로 연결되지 않습니다. 1 픽셀 갭이 남아있다.

이 틈새 결과는 앤티 앨리어싱을 형성합니다. 두 요소의 절반 불투명 한 경계가 흰색 틈에 "합쳐집니다". SVG 속성을 통해

"모양 렌더링 ="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"/> 

이들은 현재 구현되는 라인 개체입니다. 그들 사이의 간격을 제외하고는 완벽하게 작동합니다.

솔루션 지금까지 시도 : 선이 겹치도록

는 미들 포인트를 -rounding하지만, 먼저 다음 라인이 아닌 완벽하게 직선 더 이상 내가 그것을 고칠 수 있더라도이다는 antialisng 이제 색상을 추가 겹치는 픽셀에 "범프"가 생깁니다. 일할 수있는 다각형과 선을 -replacing

을 (당신이 무슨 뜻인지보고 싶다면 수평 라인과 그것을 시도),하지만 난

만큼 정확한 코너 점 계산을 얻을 수있는 가장 간단한/가장 좋은 해결책은 내가 지금 생각해 낼 수있는 것은 lineobjects가 화이트를 "더하는"것을 멈추게하는 것이다. 더 간단한 용어로, 현재 회색 + 회색 = 흰색이지만 회색 + 회색 = 검정을 원합니다. 그러나 나는 그들이 그렇게하도록 시키 든 그렇지 않든간에 나는 모른다.

당신이 뭔가를 생각해 내도록 도와주세요. 미리 감사드립니다.

Answer 1

크롬에 좀 잘 보이는 :

                                                       

                 는 [...] 순간에 그것은 회색 + = 회색, 흰색입니다하지만 난 = 회색 검은 색 + 회색합니다. 그러나 내가 그들을 그 또는 할 뜨거운 그래서 [...]

"blending mode" called multiply있어 그렇게 얻을 수 있다면 난 몰라하고 그것을 only works in Opera을 보인다.경우

당신은 미래 you may be able to use CSS에서 위치 :

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

Answer 2

봅니다 라인에 사각형 linecap를 추가. 이렇게하면 끝 부분의 줄무늬에서 줄이 "끝나야"하는 곳에서보다 직관적 인 느낌을 줄 수 있습니다.

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