爲什麼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元素？

回答

相關問題