html - 具有背景图像和背景颜色以及阴影的 SVG 元素

Question

我正在使用 this answer在像圆圈这样的 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"/>

Answer 1

好吧，我不知道你在 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>