Question

我已经定义了我的自定义svg元素，结构如下：

<svg>
  <defs>
    <filter id="myFilter"> ... </filter>
    <pattern id="myPattern"> ... </pattern>
  </defs>
  <rect width="100" height="100" class="myRect"></rect>
</svg>

.myRect {
   filter: url('#myFilter');
}

一切正常，但是因为Chrome 47我在rect元素上缺少过滤器。更有趣的是，在Opera中它仍然可以。我试过用

-webkit-filter: drop-shadow(...);
filter: drop-shadow(...);

但是这个解决方案似乎只适用于svg元素，而不是像line或rect那样的孩子。

你有什么想法吗？

实施例： https://jsfiddle.net/7azunrb5/

（我知道我可以在svg元素上添加drop-shadow，但不是我的情况）。

Answer 1

过滤器工作正常，完全按照您的要求进行操作。它在Firefox上产生相同的结果。问题在于，通过指定过滤器的方式，它不会按照您希望的方式工作。

有两个主要问题：

您指定的过滤区域为x="0" y="0" width="100%" height="100%"。这会将过滤器区域限制为与源图形（矩形）完全相同的大小。所以投影不会被看见。解决方案：从过滤器中删除这些属性。
您的矩形与SVG的大小相同，因此即使您修复问题＃1，投影也仍然不可见。解决方案，缩小矩形的大小，或放大SVG画布。

这是SVG的修改版本，表明如果您纠正这两个问题，一切都会正常运行。

＆＃13;

.myRect{
  filter: url('#drop-shadow');
  /* filter: drop-shadow(2px 2px 2px black); works in FF*/
}

svg {
  border: solid 1px green;
}

＆＃13;

<svg height="100" width="100"> 
  <defs> 
    <filter color-interpolation-filters="auto" id="drop-shadow">
      <feOffset dx="5" dy="3" in="SourceAlpha" result="offOut"></feOffset>
      <feGaussianBlur stdDeviation="3" in="offOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend></filter>
  </defs> 
  <rect x="10" y="10" width="80" height="80" class="myRect"></rect>
</svg>

＆＃13;

Chrome 47中的SVG过滤器停止工作

1 个答案: