SVG 滤镜参数

Question

假设我有一个将投影应用于元素的 svg 过滤器:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="dropShadow">
  <feFlood result="flood" flood-color="#000" flood-opacity="0.6" />
  <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" />
  <feGaussianBlur in="mask" stdDeviation="0.3" result="shadow" />
  <feOffset in="shadow" dx="-1" dy="1" result="drop-shadow" />
  <feMerge>
    <feMergeNode in="drop-shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<circle r="40" cx="50" cy="50" fill="#F00" filter="url(#dropShadow)" />
</svg>

这工作得很好而且花花公子 - 但是当我想在同一个文件中有不同类型的阴影时会发生什么？我最终得到了相同滤镜的 5 个副本，只是颜色、不透明度、偏移和模糊发生了变化。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="dropShadow">
  <feFlood result="flood" flood-color="#000" flood-opacity="0.6" />
  <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" />
  <feGaussianBlur in="mask" stdDeviation="0.3" result="shadow" />
  <feOffset in="shadow" dx="-1" dy="1" result="drop-shadow" />
  <feMerge>
    <feMergeNode in="drop-shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<filter id="dropShadow2">
  <feFlood result="flood" flood-color="#0F0" flood-opacity="1" />
  <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" />
  <feGaussianBlur in="mask" stdDeviation="1" result="shadow" />
  <feOffset in="shadow" dx="-1" dy="1" result="drop-shadow" />
  <feMerge>
    <feMergeNode in="drop-shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<filter id="dropShadow3">
  <feFlood result="flood" flood-color="#000" flood-opacity="0.6" />
  <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" />
  <feGaussianBlur in="mask" stdDeviation="0.1" result="shadow" />
  <feOffset in="shadow" dx="2" dy="2" result="drop-shadow" />
  <feMerge>
    <feMergeNode in="drop-shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<filter id="dropShadow4">
  <feFlood result="flood" flood-color="#F00" flood-opacity="0.6" />
  <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" />
  <feGaussianBlur in="mask" stdDeviation="1" result="shadow" />
  <feOffset in="shadow" dx="0" dy="0" result="drop-shadow" />
  <feMerge>
    <feMergeNode in="drop-shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<circle r="10" cx="30" cy="30" fill="#F00" filter="url(#dropShadow)" />
<circle r="10" cx="30" cy="70" fill="#F00" filter="url(#dropShadow2)" />
<circle r="10" cx="70" cy="70" fill="#F00" filter="url(#dropShadow3)" />
<circle r="10" cx="70" cy="30" fill="#F00" filter="url(#dropShadow4)" />
</svg>

一点都不干燥......

有什么方法可以将参数传递给过滤器以实现代码重用吗？

Answer 1

无法将参数传递给 SVG 过滤器。 SVG 1.1 规范中有一项规定允许过滤器通过使用 xlink:href 将来自另一个过滤器的节点合并到过滤器元素中的那个外部过滤器(但引用过滤器本身必须没有原语) - 和(谢谢罗伯特Longson) Firefox 支持此功能，但 IE 和 Chrome 不支持。