닫히지 않은 SVG 경로는 닫힌 것으로 보입니다

저는 d3으로 몇 가지 물건을 쓰고 있습니다. 나는 기괴한 문제를 보았습니다. 닫힌 경로는 'Z'문자로 끝나지 만 모든 경로는 내가 Z를 포함하는지 여부에 관계없이 닫히고 채 웁니다. spec으로부터 복사 된 예제들과 분리 되어서도 이런 일이 발생합니다. 예 :닫히지 않은 SVG 경로는 닫힌 것으로 보입니다

<svg> 
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/> 
</svg>

문제가 무엇인지 궁금합니다. 나는 어떤 통찰력을 주셔서 감사합니다. filling paths 관한

출처

2012-04-18 ballaw

OK 문제는 경로가 닫히는 모습을 보여주었습니다. 그래서 어떤 svg 작품에 대한 상용구 CSS는 다음을 포함해야합니다 : 경로 { 기입 : 없음; } – ballaw

조기에 질문을해서 죄송합니다. – ballaw

오늘 알게 된 이래로이 질문에 기쁘게 생각합니다. –

SVG specification에서 해당 줄 :

채우기 동작을 추가 "히며 closePath"는 명령의 마지막 지점을 연결하는 경로에 추가 것처럼 충전 동작을 수행하여 개방 윤곽선을 채운다 서브 패스의 최초의 점을 가지는 서브 패스

그래서, 멀리 이 우려을 채우기로, 마지막에 암시 "Z"가있다. 그러나 스트로크의 경우에는 묵시적인 종결이 없으므로 명시 적으로 "Z"를 추가하지 않는 한 마지막 점과 첫 번째 점을 연결하는 획을 그리지 않습니다.

만 채우기 비활성화, 뇌졸중을 적용 CSS를 사용하려면 :

path { 
    fill: none; 
    stroke: #000; 
    stroke-width: 1.5px; 
}

(. 난 당신이 당신의 자신의 질문에 대답,하지만 난 다른 사람들이 여전히 유용한 설명을있을 거라고 생각합니다 참조)

를

출처

2012-04-18 16:20:17 mbostock

나는 답변을 득표했지만 때로는 CSS가 캔버스로 변환하려고 할 때 옵션이 아니며 svg 경로가 채우거나 닫히지 않도록하고 싶습니다. CSS 솔루션과 동일하지만 CSS가없는 ...

<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="1.5"> 
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/> 
</svg>

출처

2014-12-14 04:00:19 SYK

= "none"도 채우지 않습니까? –

닫히지 않은 SVG 경로는 닫힌 것으로 보입니다

답변

관련 문제