为什么SVG过滤器不适用于我的代码中的HTML元素？

我已经通过在Inkscape v 0.91中应用滤镜创建了一个很好的svg帧。我也想将它应用到HTML元素。但我不能。我期待div元素变成像svg的rect元素一样的框架。你能向我解释为什么svg过滤器不适用于div元素。许多人似乎能够将svg过滤器应用于html元素。为什么SVG过滤器不适用于我的代码中的HTML元素？

<html> 
<head> 
</head> 
<body> 
<div style=" 
    background-color: aliceblue; 
    width: 300px; 
    height: 300px; 
    filter: url(#aslan); 
">Duh ! Its not working </div> 

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" width="210mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047"> 


    <defs> 
     <filter id="aslan" style="color-interpolation-filters:sRGB"> 
      <feGaussianBlur stdDeviation="0.5" result="result1"></feGaussianBlur> 
      <feBlend result="result5" mode="normal" in2="result1" in="SourceGraphic"></feBlend> 
      <feGaussianBlur stdDeviation="3" result="result6" in="result5"></feGaussianBlur> 
      <feComposite operator="xor" result="result8" in2="result6" in="result6"></feComposite> 
      <feComposite operator="in" result="fbSourceGraphic" in2="result8" in="result6"></feComposite> 
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0 " result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix> 
      <feGaussianBlur stdDeviation="0.5" result="result0" in="fbSourceGraphic"></feGaussianBlur> 
      <feSpecularLighting lighting-color="rgb(255,255,255)" specularConstant="2" result="result1" specularExponent="55" in="result0" surfaceScale="2"> 
       <fePointLight y="-10000" x="-5000" z="20000"></fePointLight> 
      </feSpecularLighting> 
      <feComposite in2="fbSourceGraphicAlpha" k1="1" result="result2" in="result1" operator="arithmetic"></feComposite> 
      <feComposite in2="result2" k3="1" k2="0.5" result="result4" in="fbSourceGraphic" operator="arithmetic"></feComposite> 
      <feComposite operator="over" result="result91" in2="result4" in="result9"></feComposite> 
      <feBlend result="fbSourceGraphic" mode="screen" in2="result91"></feBlend> 
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix> 
      <feFlood result="flood" flood-color="rgb(0,0,0)" in="fbSourceGraphic" flood-opacity=".49804"></feFlood> 
      <feComposite operator="in" result="composite1" in2="fbSourceGraphic" in="flood"></feComposite> 
      <feGaussianBlur result="blur" stdDeviation="3.6" in="composite1"></feGaussianBlur> 
      <feOffset result="offset" dx="-12.2396" dy="6"></feOffset> 
      <feComposite operator="over" result="fbSourceGraphic" in2="offset" in="fbSourceGraphic"></feComposite> 
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix> 
      <feFlood result="flood" flood-color="rgb(0,0,0)" in="fbSourceGraphic" flood-opacity=".49804"></feFlood> 
      <feComposite operator="in" result="composite1" in2="fbSourceGraphic" in="flood"></feComposite> 
      <feGaussianBlur result="blur" stdDeviation="3.6" in="composite1"></feGaussianBlur> 
      <feOffset result="offset" dx="-12.2" dy="6"></feOffset> 
      <feComposite operator="over" result="fbSourceGraphic" in2="offset" in="fbSourceGraphic"></feComposite> 
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix> 
      <feConvolveMatrix divisor="1" kernelMatrix="0 -0.15 0 -0.15 1.6 -0.15 0 -0.15 0" targetY="1" order="3 3" targetX="1" in="fbSourceGraphic"></feConvolveMatrix> 
     </filter> 
    </defs> 
    <rect transform="matrix(.59683 0 0 .59683 72.863 46.68)" height="115.16" filter="url(#aslan)" width="220.21" y="127.3" x="202.74" fill="#0f0"></rect> 
</svg> 
</body> 
</html>

谢谢。

来源

2016-05-30 Gediz GÜRSU

我已经想通了，它关系到浏览器的CSS引擎，我应该使用-webkit-过滤器：不是只是过滤。我不会删除问题，对于有类似问题的人来说。 –

您应该添加 -webkit-filter：url（#aslan）; 到你的风格定义。因此，最终的样式定义应该是这样的：

<div style=" 
    background-color: aliceblue; 
    width: 300px; 
    height: 300px; 
    filter: url(#aslan); 
    -webkit-filter: url(#aslan); 
">Duh ! Its not working </div>

来源

2016-05-30 18:15:25

为什么SVG过滤器不适用于我的代码中的HTML元素？

回答

相关问题