SVG滤镜参数答案

【问题标题】：SVG filter parametersSVG滤镜参数
【发布时间】：2015-12-30 03:51:42
【问题描述】：

假设我有一个 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>

一点也不干...

有没有办法将参数传递给过滤器以便代码重用？

【问题讨论】：

不，但 Chrome 和 Firefox 确实支持 feDropShadow，这使得标记更加简单。
是的，但我宁愿自己制作过滤器（这样会更灵活，因为我也可以制作其他类似的过滤器）
你也可以使用 CSS 过滤器，然后你就只有 CSS 而根本没有标记。

标签： svg svg-filters

【解决方案1】：

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

【讨论】：