2

私はこの答えを使用して、円のようなSVG要素にドロップシャドウを適用しています。要素に背景色を適用するfill属性があり、それをすべて円の背景画像と組み合わせたいと思います。

を使用してみました<pattern>が、背景画像を使用するか<feImage>、フィルターのドロップシャドウに追加することしかできませんが、フィルターが機能しなくなりました。

基本的に、私の画像が/ public / images / ...にあることを知って、このコードに何を追加する必要がありますか？

<filter id="dropshadow" width="130%" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  <feOffset dx="0" dy="4" result="offsetblur"/>
    <feComponentTransfer>
    <feFuncA type="linear" slope="0.1"/>
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<circle cx="50%" cy="50%" r="49%" filter="url(#dropshadow)" fill="#f8f8f8" stroke="#e7e7e7" stroke-width="1px"/>
4

1 に答える 1

0

さて、あなたがfeImageでどれほど一生懸命試したかはわかりません。しかし、このコードは完全に機能します。feImageをプルしてから、feCompositeを「in」にしてソースにクリップします。次に、その結​​果の下にドロップシャドウを合成できます。

<svg>
<defs>

<filter id="dropshadow" width="130%" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feComponentTransfer in="offsetblur" result="dropshadow">
<feFuncA type="linear" slope="0.1"/>
</feComponentTransfer>

<feImage result="bgpic" xlink:href="http://www.sencha.com/img/sencha-large.png" /> 
<feComposite operator="atop" in="bgpic" in2="SourceGraphic" result="coikelwimg"/>

<feMerge> 
<feMergeNode in="coikelwimg"/>
<feMergeNode in="dropshadow"/>
</feMerge>
</filter>

</defs>
<circle cx="50%" cy="50%" r="49%" filter="url(#dropshadow)" fill="#f8f8f8" stroke="#e7e7e7" stroke-width="1px"/>

</svg>
于 2013-03-12T03:37:44.190 に答える