2013-05-06 64 views
1

添加陰影考慮下面的代碼:在圈SVG

  1. 什麼是真正X &Ÿ指標的影響在濾芯?
  2. Can x &過濾元素中的y個參數是否會被javascript改變?我可以根據var h & var k中變量的變化定義house()中filter元素的變化參數。
  3. 在代碼中進行必要的更改以滿足需要。


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

@pswg什麼是編輯? – 2013-05-06 15:46:46

+0

只是格式化。您可以點擊我名字上方的鏈接查看問題,確切瞭解編輯內容。 – 2013-05-06 15:53:50

+0

非常感謝@pswg – 2013-05-06 17:06:54

回答

0

x和與所述寬度和高度沿過濾元件Y的屬性,描述了「過濾器區域」,相對於過濾元件的面積(或在用戶空間)中過濾器的結果是可見的。要了解更多信息,請參閱filter element的網絡平臺文檔:

是的,您可以從JavaScript中改變這些文檔,雖然這樣做有點不同尋常。你總是可以通過getElementById(「f1」)來獲取過濾元素並設置x和y。

從你的示例代碼中可以看出你想要完成的事情。

0

x和y是過濾器渲染內容的來源。 如果您應用濾鏡製作形狀陰影,則在某些情況下,模糊會在形狀內容之外展開,並且在某些情況下,x和y必須爲負,以完全顯示濾鏡生成的陰影模糊。

此代碼顯示,如果你繪製janvas一個圓圈,你會看到這個SVG編碼與x和y值的「高清」標籤的SVG發佈到-20%

與janvas( janvas.com) 產生的陰影過濾器
<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>