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>

与背景图象和背景颜色和下落阴影的SVG元素

1 个答案: