2

我正在使用这个答案在 SVG 元素（如圆形）上应用投影。我的元素上有一个fill属性可以在其上应用背景颜色，现在我想将所有这些与圆圈上的背景图像结合起来。

我试过使用 a<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 回答