1

Given the code below:

  1. What are actually x&y parametes in filter element ?
  2. Can x&y parameters in filter element be kept on changing by javascript ? I can define the changing x&y parameters of filter element in house() as per the changes in variable in var h &var k.
  3. Make the necessary changes in code to meet the necessity. 


<body style="background:black;margin:0px" onmousemove="house(event)">
  <defs>
    <filter id="f1" x="0" y="0" width="105%" height="105%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <circle r="25" id="circle" fill="yellow" filter="url(#f1)"></circle>
</svg>
<script>
function house(e)
{
    var h=e.clientX;
    var k=e.clientY;
    var ball=document.getElementById("circle");
    var r=ball.getAttribute("r");
    ball.setAttribute("cx",h);
    ball.setAttribute("cy",k);

}
</script>
4

2 に答える 2

0

フィルター要素の x 属性と y 属性は、幅と高さに加えて、"フィルター領域" を表します。これは、フィルターの結果が表示される、フィルター処理された要素 (またはユーザー空間) に関連する領域です。詳細については、フィルター要素の Web プラットフォーム ドキュメントを参照してください。

はい、これらを JavaScript とは異なるものにすることができますが、そうするのは少し珍しいことです。いつでも getElementById("f1") を実行してフィルター要素を取得し、x と y をそのように設定できます。

サンプルコードからは、何を達成しようとしているのかが少しわかりません。

于 2013-05-07T03:49:14.297 に答える
0

x と y は、フィルターのレンダリングされたコンテンツの原点です。フィルタを適用して形状の影を作成すると、場合によってはぼかしが形状のコンテンツの外側に拡張され、フィルタによって生成された影のぼかしを完全に表示するには、x と y を負にする必要があります。

このコードは、janvas ( janvas.com ) で作成されたシャドウ フィルターを示しています。janvas で円を描いて svg を公開すると、この svg コードが x と y の値が -20% の「def」タグに表示されます。

<filter id="_0_" x="-20%" y="-20%" width="200%" height="200%" type="Shadow" shadowoffsetx="5" shadowoffsety="5" shadowblur="5" shadowcolor="rgba(0,0,0,.5)">
<feOffset result="offOut" in="SourceGraphic" dx="5" dy="5">
</feOffset>
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0">
</feColorMatrix>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2">
</feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal">
</feBlend>
</filter>
于 2013-05-07T22:08:27.887 に答える