동그라미의 원형보기

Question

내 안에 경계 반지 (녹색 & 정적) 및 일부 "펄스"외부 원 (파란색)이있는 circle이 있습니다. 정적 원형 안에있는 "펄싱 원"부분 만 볼 수있게하려면 어떻게 접근합니까?

또한 참조 용 HTML을 렌더링하는 JS가 포함되었지만 JSFiddle에서 SVG가 생성되지 않았습니다.

SVG에 레이어가 있다고 생각하지만, 다른 원의 렌더링을 어떻게 구조화했는지에 대해서는별로 도움이되지 않습니다. 작동 방식을 빠르게 검토합니다.

1. 주황색 그라디언트로 배경 원을 그리고 동심원에 원을 배치하십시오.
2. 녹색 정적 원을 그립니다.
3. 4 개의 펄스를 데카르트 평면의 기본 포인트에 놓습니다.
4. 펄스를 움직입니다.

는 내가 주 원의 범위 내에서 클릭을 측정 할 수 있다는 것을 알고, 그래서 내가 그린 원 링 내에서 펄스 (어쩌면 해키 방식)의 애니메이션을 제한 할 것으로 기대하고있다.

어쩌면 역순으로 채워져있는 다른 원이 맨 위에 놓여있을 수 있습니까? 단지 아이디어를 뱉어 내고, 내가 알고있는 모든 것을 시도해 보았고 연구하는 다른 예나 아이디어를 찾을 수 없었기 때문이다. 내가 제대로 이해하면

How to calculate the SVG Path for an arc (of a circle)

Answer 1

, 당신은 녹색, 비의 내부에 펄스 원을 제한하려면 : 당신이 도움이 될

관련 기사는 나에게이 작업을 수행 할 수있는 방법을 생각하는 데 도움 - 원을 그리다. BTW

<defs> 
    <!-- ... --> 
    <!-- Here we define the clip path, using the non-pulsing circle --> 
    <clipPath id="ringClip"> 
    <use xlink:href="#ring-circle"/> 
    </clipPath> 
</defs> 
<g> 
    <!-- other content --> 
    <!-- We put all pulsing circles into a group, 
     applying the clip path to them as a whole --> 
    <g clip-path="url(#ringClip)"> 
    <!-- pulsing circles --> 
    </g> 
    <circle id="ring-circle"><!-- more attributes --></circle> 
</g> 

Try on jsFiddle