11

私のマークアップには、次のようなチャンクがあります。

<svg width="0" height="0" style="display:none" id="dummy-wedge">
 <g class="dummy" transform="translate(100, 100)">
    <defs>
      <clipPath id="clip1">
        <polygon id="clip1Shape" points="-100,-100 0,-100 0,0 -100,-20" />        
      </clipPath>
    </defs>
    <circle id="" cx="0" cy="0" r="52" fill-opacity="0" 
                  stroke="#ffffff" stroke-opacity="0.6" stroke-width="50" 
                  pointer-events="visiblePainted" clip-path="url(#clip1)" />
  </g>
</svg>

私がやりたいのは、そのチャンクを取得して別の svg ルート要素に複製し、それぞれが異なる位置とクリップ セグメントを持つ一連のウェッジを作成することです。その部分はクールですが、フラストレーションは、複製された各 clipPath 要素が新しい ID を受け取る必要があり、一致する要素の clip-path 属性に挿入する必要があることです。

すべての円弧が同じ長さである場合、共通のクリップを使用して回転変換を使用できることはわかっていますが、必ずしも同じ長さであるとは限りません。

明示的に名前を付けるのではなく、トポロジー関係を使用してクリップ ポリゴンを宣言することはできますか? または、パスを使用する以外に、このような弧を定義するより良い方法はありますか?

ありがとう。

4

1 に答える 1

1

なぜクリッピングを使用する必要があるのですか？さまざまな円弧セグメントを含むパス要素を使用するだけではいけませんか？

目的の動作を取得するための宣言的な方法は（まだ）ありませんが、これがSVGパラメーター仕様で対処することを目的としています。そこにある例と、コンテンツを処理するために提供されているスクリプトの実装を見てください（現在のブラウザーをサポートする方法として）。注：これはまだ作業中のドラフトであり、変更される可能性があります。

于 2011-03-12T08:24:53.430 に答える