SVG : 도형의 일부에 채우기 색 설정

4 개의 섹션으로 나누고 싶은 타원 모양이 있습니다. 개별적으로이 섹션을 색칠 할 수 있습니까 아니면 4 가지 별도의 사용자 정의 모양을 만들어야합니까?SVG : 도형의 일부에 채우기 색 설정

(사진을 게시 하겠지만 담당자는 아직 없습니다.) 희망은 그게 무슨 뜻인지 분명히. 여기에 코드 http://jsfiddle.net/KQ3eH/

<html> 
<head> 

<style> 

.anellipse { 
    fill:rgb(255,255,255); 
    stroke-width:2; 
    stroke:rgb(0,0,0); 
} 

.aline { 
    stroke:rgb(0,0,0); 
    stroke-width:2; 
} 

</style> 

</head> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="960" 
    height="640"> 
<ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318"/> 
<line class="aline" x1="2" y1="320" x2="958" y2="320" stroke-linecap="round" stroke-dasharray="1, 4"/> 
<line class="aline" x1="480" y1="2" x2="480" y2="638" stroke-linecap="round" stroke-dasharray="1, 4"/> 
</svg> 

</body> 
</html>

출처

2014-05-21 Paul Rooney

현재 SVG의'xml'을 보여주십시오? – merlin2011

당신은 멀티 컬러 채우기 할 수없는 볼 수 있습니다

편집 (물론 이상 두 가지 색상 어쨌든). 그래서 당신은 기본적으로 네 부분으로 나누어야합니다.

타원 모양 자체를 분할하는 것은 약간 까다 롭습니다. 훨씬 쉬운 방법은 4 개의 직사각형을 그려서 타원을 클리핑 패스로 사용하는 것입니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="960" height="640"> 
    <defs> 
     <clipPath id="myell"> 
      <ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318" /> 
     </clipPath> 
    </defs> 

    <g clip-path="url(#myell)"> 
     <rect x="2" y="2" width="478" height="318" fill="red"/> 
     <rect x="480" y="2" width="478" height="318" fill="green"/> 
     <rect x="2" y="320" width="478" height="318" fill="orange"/> 
     <rect x="480" y="320" width="478" height="318" fill="blue"/> 
    </g> 

</svg>

Demo here

출처

2014-05-22 06:21:53

당신은 여러 가지 빛깔 할 수는 패턴을 사용하여 채 웁니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="960" height="640"> 
     <defs> 
      <pattern id="pat" width="1" height="1" viewBox="0 0 1 1" preserveAspectRatio="none"> 
       <rect width=".5" height=".5" fill="red" /> 
       <rect x=".5" width=".5" height=".5" fill="green" /> 
       <rect y=".5" width=".5" height=".5" fill="orange" /> 
       <rect x=".5" y=".5" width=".5" height=".5" fill="blue" /> 
      </pattern> 
     </defs> 
     <ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318" fill="url(#pat)"/> 
     <line class="aline" x1="2" y1="320" x2="958" y2="320" stroke-linecap="round" stroke-dasharray="1, 4" /> 
     <line class="aline" x1="480" y1="2" x2="480" y2="638" stroke-linecap="round" stroke-dasharray="1, 4" /> 
    </svg>

example을 참조하십시오.

출처

2014-05-22 08:16:07

SVG : 도형의 일부에 채우기 색 설정

답변

관련 문제