2016-05-30 5 views
2

私はInkscape v 0.91でフィルターを適用することで素晴らしいsvgフレームを作成しました。 それをHTML要素にも適用したいと思います。しかし、私は傾ける。私はdiv要素がsvgのrect要素のようなフレームに変わることを期待していました。 svgフィルタがdiv要素に適用されなかった理由を私に説明できますか?多くの人がhtml要素にsvgフィルタを適用できるようです。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> 

ありがとうございます。

+0

ブラウザのCSSエンジンに関連しているとわかりました。フィルタの代わりに-webkit-filterを使用する必要があります。 似たような問題を抱えている人のために、私は質問を削除しません。 –

答えて

2

-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> 
関連する問題