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

回答

相关问题