只能看到一個svg圈的弧線

我有一個circle，裏面有一個邊界環（靜態的綠色&），還有一些「脈動」的外圈（藍色）。我將如何處理這個問題，只讓靜態圓內的「脈衝圓」部分可見？只能看到一個svg圈的弧線

我還包括了使得呈現HTML供您參考的JS，但它不會在JSFiddle中生成SVG。

我認爲圖層存在於SVG中，但是對於我如何構建其他圓圈的渲染，這不是非常有幫助。快速回顧它的工作方式。

用橙色漸變繪製背景圓，並放置同心圓上有圓。
畫出綠色的靜態圓圈。
將四個脈衝放在笛卡爾平面的基點上。
動畫的脈衝。

我知道我可以測量主圓的邊界內的一個點擊，所以我希望我可以限制脈衝的動畫（也許是一種詭計多端的方式）到綠色圓環內。

也許其他放置在頂部的圓圈有反向填充或其他東西？只是吐出想法，因爲我已經嘗試了我所知道的一切，無法找到任何其他的例子或想法研究。

相關的文章，可以幫助你幫我想想辦法做到這一點：

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

來源

2013-01-08 chris Frisina

如果我理解正確的話，你要的脈衝圓限制的綠色，無內脈動圈。

<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

來源

2013-01-08 12:00:37

順便說一句，在你的JavaScript代碼中的註釋：這可以通過使用剪切路徑來完成你不需要'的setAttribute（ '的xmlns'，的xmlns）'和'的setAttribute（'的xmlns ：xlink'，「w3.org/1999/xlink」）'。你正在使用'createElementNS（）'，因此，一切都進入正確的命名空間，而不需要設置這些'xmlns'屬性。如果你沒有把元素放到正確的名稱空間中，也就是說如果你不使用'createElementNS（）'，那麼'xmlns'屬性不會改變它。這些屬性僅用於在編寫XML代碼時建立名稱空間，甚至在某些環境中甚至不能像屬性那樣訪問，如簡單的XSLT。 –

只能看到一個svg圈的弧線

回答

相關問題