2011-11-20 6 views
6

센터가 비어있는 SVG에서 모양을 그려야합니다. 중간에 원이있는 원을 그리는 데이 질문을했습니다. here. 중도 (다른 모양)가 비어있는 상태에서 SVG의 모양을 그려야합니다. 아이디어가 있으십니까?SVG에 보이드 모양을 그립니다.

것은 나는 마스크 또는 ClipPaths를 사용 할 수 있었다 생각 해요하지만 난 완전히

+1

는 http://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle –

답변

9

을 이해하는 두 개의 하위 경로로 구성 경로로 모양을 만들고 있는지 확실하지 않습니다. 첫 번째 하위 경로는 외곽 셰이프를 설명합니다. 두 번째 하위 경로는 내부 모양을 나타냅니다. pathto 'evenodd'의 채우기 규칙을 설정하십시오.

속이 빈 사각형의 경우 두 개의 하위 경로로 구성된 경로를 만듭니다. 하나는 바깥 사각형입니다. 내부 사각형에 대한 하나

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

<path d="M 100 100 L 200 100 L 200 200 L 100 200 z 
    M 110 110 L 190 110 L 190 190 L 110 190 z" 
    fill="red" 
    stroke="black" stroke-width="1" 
    fill-rule="evenodd"/> 

</svg> 

enter image description here

+0

감사를 참조하는 완벽하게 작동했습니다 :-) – luketorjussen

관련 문제