0

放射状グラデーション マスクを適用したい色とサイズの異なる SVG 円が多数あります。その円のサイズに合わせて引き伸ばすことによって、各円に適用される単一のマスクを定義する方法はありますか?

これが私がこれまでに思いついたものです：

<radialGradient id="radialGradient" cx=".5" cy=".5" r=".5">
  <stop offset="0%" stop-color="white" stop-opacity="0"/>
  <stop offset="100%" stop-color="white" stop-opacity="1"/>
</radialGradient>
<mask id="radialMask" maskUnits="objectBoundingBox" x="0" y="0" width="1.0" height="1.0">
  <circle cx="0" cy="0" r="50%" fill="url(#radialGradient)"/>
</mask>

...

<circle cx="10" cy="10" r="10" fill="red" mask="url(#radialMask)"/>
<circle cx="100" cy="100" r="50" fill="blue" mask="url(#radialMask)"/>

問題は、マスク/円のパーセンテージ半径が、マスクが適用されている円のサイズに対して測定されていないように見えることです。

適用するアイテムごとに新しいマスクを定義する必要なく、これを行う方法はありますか?

4

1 に答える 1

3

あなたも設定する必要がありmaskContentUnits="objectBoundingBox"ます。これにより、マスクされたオブジェクトのサイズに対してマスクの内容が相対的になります。

于 2013-10-16T23:45:12.670 に答える