Question

我很难将过滤器应用于内联SVG符号。我可以在普通的外部SVG文件中使其正常工作，但只要我将其与HTML文档内联，过滤后的对象就会消失。 filter属性是否缺少任何内容？在最新的Chrome 57中，这对我失败了。

<html>
<body>

<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <filter id="blur_inline">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
  </filter>
    
  <symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
  </symbol>
  
  <symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
  </symbol>

</defs>

</svg>


<p>Symbol with a green and blurred blue box:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#filtered" x="10" y="35" ></use>
</svg>

<p>Second symbol with no filter applied:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>


</body>
</html>

Answer 1

将SVG设置为display：none将使其无法正常运行，因为它会禁用所有CSS。

<html>
<body>

<svg width="0" height="0">
<defs>
  <filter id="blur_inline">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
  </filter>
    
  <symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
  </symbol>
  
  <symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
  </symbol>

</defs>

</svg>


<p>Symbol with a green and blurred blue box:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#filtered" x="10" y="35" ></use>
</svg>

<p>Second symbol with no filter applied:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>


</body>
</html>

内联符号上的SVG过滤器

1 个答案: