为什么doDrop Shadow Filter在Chrome中显示正常，但在Firefox / IE中呈现整个路径不可见

Question

我正在动态渲染以下 svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,952,500" width="100%" >
<defs>
<filter id="plotShadow" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" in="offOut" result="matrixOut" values=" 
0 0 0 0 0.0
0 0 0 0 0.0 
0 0 0 0 0.0 
0 0 0 0.5 0">
</feColorMatrix>
<feOffset dx="4" dy="4" in="SourceAlpha" result="offOut"></feOffset>
<feGaussianBlur in="matrixOut" stdDeviation="5" result="blurOut">
</feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal">
</feBlend></filter>
</defs>
<g fill="#000000" transform="translate(0,50)" class="lineClass">
<path fill="none" stroke="#00a4df" stroke-opacity="1" stroke-width="5" filter="url(#plotShadow)" stroke-linejoin="round" stroke-linecap="round" d="M0 74.66666666666667 L180.62068030898502 74.66666666666667 L195.6055071198045 0 L633.9328734420252 0 L648.9177002528447 74.66666666666667 L772.8096753472835 74.66666666666667"></path>
</g>
</svg>

图像在chrome(带阴影的路径可见(中正确显示，在IE或Firefox中，路径根本不可见。

如果我从路径定义中删除 filter="url(#plotShadow("，那么路径在 Firefox 和 chrome 中正确显示，尽管没有阴影。

任何人都可以帮助确定我的错误在哪里或解释为什么 svg 在不同的浏览器中呈现方式不同？

我已将代码上传到代码笔：代码笔上的svg

Answer 1

修复您的结果/输入并放大默认过滤器区域，这样您就不会有剪辑。(请注意，对于纯垂直线或水平线，此代码将失败。对于这些，您必须显式指定 filterUnits="userSpaceOnUse"，并以用户空间单位动态计算过滤器区域的正确 x/y/宽度/高度。不同的浏览器对格式错误的筛选器语法具有更多/更少的容忍度。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,952,500" width="100%" >
<defs>
  <filter id="plotShadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
    <feColorMatrix type="matrix" in="SourceGraphic" result="matrixOut" values="0 0 0 0 0.0
                   0 0 0 0 0.0 
                   0 0 0 0 0.0 
                   0 0 0 0.5 0"/>
    <feOffset dx="4" dy="4" in="matrixOut" result="offOut"/>
    <feGaussianBlur in="offOut" stdDeviation="5" result="blurOut"/>
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
  </filter>
</defs>
<g fill="#000000" transform="translate(0,50)" class="lineClass">
  <path fill="none" stroke="#00a4df" stroke-opacity="1" stroke-width="5" filter="url(#plotShadow)" stroke-linejoin="round" stroke-linecap="round" d="M0 74.66666666666667 L180.62068030898502 74.66666666666667 L195.6055071198045 0 L633.9328734420252 0 L648.9177002528447 74.66666666666667 L772.8096753472835 74.66666666666667"></path>
</g>
</svg>

Answer 2

筛选器中存在错误。 第一个过滤器原语(<feColorMatrix>(指定其输入应来自另一个原语，结果名为"offOut"。

<feColorMatrix ... in="offOut" .../>

但是没有这样的过滤器原语(无论如何在它之前(。 将其更改为 in="SourceGraphic" ，它将起作用。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,952,500" width="100%" >
<defs>
  <filter id="plotShadow" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" in="SourceGraphic" result="matrixOut" values=" 
                   0 0 0 0 0.0
                   0 0 0 0 0.0 
                   0 0 0 0 0.0 
                   0 0 0 0.5 0"/>
    <feOffset dx="4" dy="4" in="SourceAlpha" result="offOut"/>
    <feGaussianBlur in="matrixOut" stdDeviation="5" result="blurOut"/>
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
  </filter>
</defs>
<g fill="#000000" transform="translate(0,50)" class="lineClass">
  <path fill="none" stroke="#00a4df" stroke-opacity="1" stroke-width="5" filter="url(#plotShadow)" stroke-linejoin="round" stroke-linecap="round" d="M0 74.66666666666667 L180.62068030898502 74.66666666666667 L195.6055071198045 0 L633.9328734420252 0 L648.9177002528447 74.66666666666667 L772.8096753472835 74.66666666666667"></path>
</g>
</svg>