SVG彩色投影濾鏡失敗時使用JavaScript

建我創建了一個下拉陰影的SVG圖像，採用純SVG工作正常（見a live demo）：SVG彩色投影濾鏡失敗時使用JavaScript

<!DOCTYPE html> 
<html> 
    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <defs> 
       <filter id="drop"> 
        <feComponenttransfer result="offOut" in="SourceAlpha"> 
         <feFuncA type="linear" /> 
         <feFuncR type="discrete" tablevalues="1" /> 
         <feFuncG type="discrete" /> 
         <feFuncB type="discrete" /> 
        </feComponentTransfer> 
        <feOffset result="shadow" dx="67" dy="0" in="offOut" /> 
        <feGaussianBlur stdDeviation="8" result="blurOut" in="shadow" /> 
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
       </filter> 
      </defs> 
      <g> 
       <g filter="url(#drop)"> 
        <image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg" 
        preserveAspectRatio="defer"></image> 
       </g> 
      </g> 
     </svg> 
    </body> 
</html>

這裏的圖像與紅色的創建陰影，符合市場預期，但比我嘗試創建和修改通過JavaScript的SVG，使用下面的代碼（見a live demo）：

<!DOCTYPE html> 
<html> 

    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="sv"> 
      <rect width="90" height="90" stroke="green" stroke-width="3" fill="rgba(255,25,8,1)" 
      /> 
      <g id="gr"> 
       <image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg" 
       preserveAspectRatio="defer"></image> 
      </g> 
     </svg> 
    </body> 
    <script> 
     var feoffset = document.createElementNS("http://www.w3.org/2000/svg", "feOffset"); 
     var feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); 
     var filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); 
     var definition = document.createElementNS("http://www.w3.org/2000/svg", "defs"); 

     filter.setAttribute("id", "fPicture5"); 
     filter.setAttribute("filterUnits", "userSpaceOnUse"); 
     feoffset.setAttribute("result", "shadow"); 
     feoffset.setAttribute("in", "offOut"); 

     feoffset.setAttribute("dx", "67"); 
     feoffset.setAttribute("dy", "0"); 

     feGaussianBlur.setAttribute("result", "blurOut"); 
     feGaussianBlur.setAttribute("in", "shadow"); 
     feGaussianBlur.setAttribute("stdDeviation", "8"); 

     var feBlend = document.createElementNS("http://www.w3.org/2000/svg", "feBlend"); 
     var feCTransfer = document.createElementNS("http://www.w3.org/2000/svg", "feComponentTransfer"); 

     var feFuncR = document.createElementNS("http://www.w3.org/2000/svg", "feFuncR"); 
     var feFuncG = document.createElementNS("http://www.w3.org/2000/svg", "feFuncG"); 
     var feFuncB = document.createElementNS("http://www.w3.org/2000/svg", "feFuncB"); 

     feCTransfer.setAttribute("in", "SourceAlpha"); 
     feCTransfer.setAttribute("result", "offOut"); 

     feBlend.setAttribute("in", "SourceGraphic"); 
     feBlend.setAttribute("in2", "blurOut"); 
     feBlend.setAttribute("mode", "normal"); 

     feFuncR.setAttribute("type", "discrete"); 
     feFuncG.setAttribute("type", "discrete"); 
     feFuncB.setAttribute("type", "discrete"); 

     feFuncR.setAttribute("tablevalues", "1"); 
     feFuncG.setAttribute("tablevalues", "0"); 
     feFuncB.setAttribute("tablevalues", "0"); 

     feCTransfer.appendChild(feFuncR); 
     feCTransfer.appendChild(feFuncG); 
     feCTransfer.appendChild(feFuncB); 

     filter.appendChild(feCTransfer); 
     filter.appendChild(feoffset); 
     filter.appendChild(feGaussianBlur); 
     filter.appendChild(feBlend); 

     definition.appendChild(filter); 
     document.getElementById("sv").appendChild(definition); 
     document.getElementById("gr").setAttribute("filter", "url(#fPicture5)"); 
    </script> 

</html>

結果是成功創建了圖像，但陰影是黑色的。

我無法找到一種方法使其成爲預期的紅色，任何想法？

來源

2013-02-14 Eldon Lesley

在Firefox once I replace the image上正常工作，並且實際上存在一個例如那個在其他小提琴：

<image x="10" y="100" width="440" height="60" xlink:href="http://placekitten.com/100/80" 
preserveAspectRatio="defer"></image>

如果您使用的是一些其他的UA，它不工作，那麼也許你應該提高對任何bug跟蹤它使用的錯誤。

你是否意識到你也錯過了第二個小提琴中的feFuncA feComponentTransfer子項？

來源

2013-02-14 11:06:47

不，陰影應該是紅色的，而不是像第一個小提琴那樣黑色 – 2013-02-14 11:12:13

它們在Firefox上都是黑色的。 – 2013-02-14 11:16:05

我想讓第二個小提琴變成紅色，奇怪的是，第一個小提琴的陰影在Chrome上是紅色的，而在Firefox上是黑色的（測試過），而第二個小提琴在瀏覽器上都是黑色的 – 2013-02-14 11:25:12

這個怎麼樣？ http://jsfiddle.net/WvYpS/

替換feComponentTransfer與feColorMatrix：

<feColorMatrix type="matrix" 
values="0 0 0 1 0 
     0 0 0 0 0 
     0 0 0 0 0 
     0 0 0 1 0"/>

來源

2013-02-14 16:18:25

只要改變你的feFuncR tableValues爲「1」 - 現在它固定在Firefox。

<feFuncR type="discrete" tableValues="1 1" />

Firefox中存在一個錯誤，它沒有正確處理離散tableValues的單值，並且已經被固定在edge中。

來源

2013-02-15 17:50:12

SVG彩色投影濾鏡失敗時使用JavaScript

回答

相關問題