1

連続数学関数を使用して、x 座標と y 座標に基づいて SVG 要素の不透明度を設定することは可能ですか? ここでは、不透明度が 20% の青い四角形がありますが、不透明度を 20% にする代わりに、関数 を使用して各ポイントで四角形の不透明度を定義したいと思いますsin(x)/2+sin(y)/2。ここで、x と y は四角形内の各ポイントの座標です。

<svg>
  <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" fill-opacity="0.2" />
</svg>

不透明度を"Math.sin(x)/2+Math.sin(y)/2"に設定しようとしましたが、これでは目的の効果が得られません。SVG ポリゴンの不透明度を x 座標と y 座標の関数として設定するにはどうすればよいですか?

4

1 に答える 1

1

いいえ、これを SVG で宣言的に設定することはできません。SVG と CSS3 の両方のcalc()機能をサポートするユーザー エージェントでさえ、これを行うことはできません。有効なオペランドは任意のプロパティではなく、CSS の長さの単位だけだからです。

これを行うには、次のいずれかを行う必要があります。

  1. オブジェクトの構築に関する知識に基づく不透明度で SVG を動的に生成する、または

  2. この情報なしでドキュメントを生成し、それを処理して追加します。

#2 の実装は、XSLT (または新しいドキュメントを作成するその他の「1 回限りの」変換テクノロジ) を介して行うか、UA スクリプト (JavaScript など) を介してインメモリで行うことができます。

JavaScript ソリューションは次のようになります。

var rects = document.querySelectorAll('rect');
for (var i=rects.length;i--;){
  // Assumes that all rects are neither transformed, nor are they
  // inside any transformation hierarchy
  var rect = rects[i];
  var x = (rect.getAttribute('x')||0)*1;
  var y = (rect.getAttribute('y')||0)*1;
  var opacity = Math.sin(x)/2+Math.sin(y)/2;
  rect.setAttribute('opacity',opacity);
}

編集：これは形状の不透明度に単独で影響することに注意してください。代わりに、塗りつぶし効果としてピクセルごとに形状の不透明度を制御するように求めている場合、私の答えは次のとおりです。

あなたが得ることができる最も近いのは、XとYの線形グラデーションを選択した関数にマッピングし、後でそれらの値を組み合わせて2つ<feComponentTransfer>を使用することです。<feFuncA type="table">

于 2013-05-06T04:59:23.460 に答える