Question

让我们说我有一个svg过滤器，它将一个投影应用于一个元素：

＆＃13;

<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>

＆＃13;

这样可以正常工作 - 但是当我想在同一个文件中使用不同类型的阴影时会发生什么？我最终得到了5份相同的滤镜，只有颜色，不透明度，偏移和模糊都改变了。

＆＃13;

<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>

＆＃13;

根本不干......

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

Answer 1

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

SVG过滤器参数

1 个答案: