1

内部に境界リング（緑と静的）があり、いくつかの「パルス状」の外側の円（青）がある円があります。静的な円の内側にある「パルス円」の部分のみを表示するには、これにどのようにアプローチしますか?

参照用に HTML をレンダリングする JS も含めましたが、JSFiddle で SVG を生成しません。

SVGにはレイヤーが存在すると思いますが、他の円のレンダリングをどのように構成したかを考えると、それはあまり役に立ちません。 操作方法を簡単にレビューします。

  1. オレンジ色のグラデーションで背景の円を描き、その上に同心円を配置します。
  2. 緑の静止円を描きます。
  3. デカルト平面の基点に 4 つのパルスを配置します。
  4. パルスをアニメーション化します。

メインの円の境界内でクリックを測定できることはわかっているので、パルスのアニメーションを (おそらくハッキーな方法で) 緑色の円のリング内に制限できることを期待しています。

たぶん、逆の塗りつぶしまたは何かがある上に配置された他の円ですか？アイデアを吐き出すだけです。私が知っていることはすべて試しましたが、他の例やアイデアの研究を見つけることができません。

これを達成する方法を考えるのに役立つ関連記事:

(円の) 円弧の SVG パスを計算する方法

4

1 に答える 1

2

私の理解が正しければ、パルス状の円を緑色の非パルス状の円の内側に限定したいということですね。これは、クリップ パスを使用して実行できます。

<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>

jsFiddle を試す

于 2013-01-08T12:00:37.220 に答える