SVG-过滤器和CSS交叉浏览器问题

只有firefox显示我的SVG是正确的。 谁能告诉我我做错了什么

在这里拉小提琴

SVG

<svg style="max-height: 100%;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24.706 29.511" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgClean">
<defs>
    <radialGradient gradientUnits="userSpaceOnUse" r="75%" cy="50%" cx="50%" id="rgrad">
        <stop style="stop-color:#a9e4f7; stop-opacity:1" offset="1%"/>
        <stop style="stop-color:#00a9dd; stop-opacity:1" offset="50%"/>
    </radialGradient>
    <filter height="250px" width="250px" y="-50%" x="-50%" primitiveUnits="objectBoundingBox" id="drop-shadow"> 
        <feGaussianBlur stdDeviation="0.01" in="SourceAlpha"/>
        <feOffset result="offsetblur" dy="0.02" dx="0.01"/>
        <feFlood flood-color="black"/>
        <feComposite operator="in" in2="offsetblur"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter> 
    <style type="text/css">
#svgClean {
padding:0.5% 0.5% 0.5% 0.5%;
width:250px;
height:250px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid #000000;
-webkit-border-top-left-radius: 15%;
-webkit-border-top-right-radius: 15%;
-webkit-border-bottom-right-radius: 15%;
-webkit-border-bottom-left-radius: 15%;
-moz-border-radius-topleft: 15%;
-moz-border-radius-topright: 15%;
-moz-border-radius-bottomright: 15%;
-moz-border-radius-bottomleft: 15%;
border-top-left-radius: 15%;
border-top-right-radius: 15%;
border-bottom-right-radius: 15%;
border-bottom-left-radius: 15%;
background: radial-gradient(center center , circle cover , #7d7e7d 1% , #000000 100% );
background: -o-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% );
background: -ms-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% );
background: -moz-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% );
background: -webkit-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% ); -webkit-box-shadow: 0rem 0rem 1rem #000000;
-moz-box-shadow: 0rem 0rem 1rem #000000 ;
box-shadow: 0rem 0rem 1rem #000000 ; -webkit-box-shadow: 0rem 0rem 1rem #000000;
-moz-box-shadow: 0rem 0rem 1rem #000000 ;
box-shadow: 0rem 0rem 1rem #000000 ; }

g {
fill:url(#rgrad);
filter:url(#drop-shadow);
stroke: #000;
stroke-width: 0.1%;
} 
    </style>
    </defs>
    <g id="viewport"> <path d="M15.906,4.482c-0.119,0-0.236,0.01-0.352,0.024c0.136,0.153,0.22,0.344,0.22,0.554c0,0.499-0.458,0.904-1.022,0.904  c-0.398,0-0.739-0.204-0.909-0.499c-0.255,0.344-0.405,0.755-0.405,1.196c0,1.205,1.105,2.181,2.467,2.181  c1.363,0,2.468-0.976,2.468-2.181S17.269,4.482,15.906,4.482z"/><path d="M7.522,8.854c1.37,0,2.48-0.98,2.48-2.192c0-1.21-1.11-2.191-2.48-2.191c-0.261,0-0.512,0.036-0.748,0.102   C6.878,4.713,6.939,4.88,6.939,5.06c0,0.499-0.458,0.904-1.022,0.904c-0.249,0-0.473-0.082-0.651-0.212 c-0.143,0.277-0.226,0.584-0.226,0.91C5.041,7.873,6.152,8.854,7.522,8.854z"/><path d="M20.144,10.541c0,0-0.092,0.072-0.247,0.208c0.479-0.862,0.747-1.856,0.747-2.973c0-1.707-0.333-2.921-1.389-4.204 c0.938-0.994,0.486-3.104,0.486-3.104s-0.344-0.456-0.71-0.456c-0.2,0-0.405,0.135-0.565,0.55c0.006,0.42-0.484,0.929-1.105,0.929   c-0.229,0-0.477-0.068-0.724-0.238c-1.374-0.79-3.013-1.25-4.774-1.253c-1.761,0.003-3.401,0.463-4.775,1.253   C6.84,1.422,6.593,1.491,6.364,1.491c-0.622,0-1.111-0.508-1.106-0.929c-0.161-0.415-0.366-0.55-0.564-0.55 c-0.366,0-0.71,0.456-0.71,0.456s-0.453,2.11,0.485,3.104C3.413,4.855,3.08,6.069,3.08,7.776c0,1.213,0.315,2.285,0.876,3.197   c-0.042,0.064-0.086,0.128-0.126,0.194c-1.283,0.38-4.937,1.966-3.5,7.512c1.73,6.682,6.598,9.476,6.598,9.476  s0.182-0.271,0.436-0.774c0.18,1.199,1.395,2.129,2.867,2.129c1.054,0,1.976-0.479,2.481-1.19c0.531,0.53,1.324,0.868,2.21,0.868    c1.595,0,2.893-1.092,2.893-2.434c0-0.023-0.003-0.044-0.004-0.067c0.365,0.677,0.641,1.044,0.641,1.044s4.701-3.008,6.049-9.756    C25.848,11.227,20.144,10.541,20.144,10.541z M19.587,6.662c0,1.793-1.65,3.252-3.681,3.252c-2.029,0-3.68-1.458-3.68-3.252 c0-1.793,1.651-3.252,3.68-3.252C17.937,3.41,19.587,4.869,19.587,6.662z M12.749,9.101l-0.87,1.004l-1.048-1.004   c0,0,0.166-0.9,1.01-0.853C12.684,8.298,12.749,9.101,12.749,9.101z M4.631,1.05c0.09,0.214,0.236,0.416,0.431,0.59 c0.357,0.318,0.819,0.494,1.303,0.494c0.397,0,0.792-0.122,1.142-0.354c1.298-0.741,2.803-1.134,4.356-1.137    c1.553,0.003,3.058,0.396,4.355,1.137c0.35,0.232,0.745,0.354,1.143,0.354c0.483,0,0.946-0.176,1.303-0.494 c0.194-0.175,0.341-0.376,0.431-0.59c0.064,0.643,0.053,1.631-0.398,2.109L18.412,3.46c-0.712-0.436-1.574-0.694-2.505-0.694    c-1.879,0-3.483,1.046-4.116,2.513c-0.633-1.467-2.237-2.513-4.117-2.513c-0.891,0-1.718,0.236-2.413,0.639L5.029,3.159 C4.578,2.682,4.566,1.693,4.631,1.05z M7.673,3.41c2.029,0,3.681,1.459,3.681,3.252c0,1.793-1.651,3.252-3.681,3.252    c-2.029,0-3.68-1.458-3.68-3.252C3.993,4.869,5.645,3.41,7.673,3.41z M7.673,10.558c1.209,0,2.305-0.433,3.103-1.131l0.089,0.085    l0.998,1.334l1.003-1.373c0.792,0.67,1.862,1.084,3.041,1.084c1.758,0,3.275-0.917,3.982-2.235c-0.321,3.586-3.795,5.61-8.026,5.62  c-4.112-0.009-7.509-1.92-7.993-5.32C4.636,9.779,6.052,10.558,7.673,10.558z M10.229,28.545c-0.992,0-1.799-0.659-1.799-1.468  c0-0.811,0.808-1.469,1.799-1.469c0.992,0,1.8,0.658,1.8,1.469C12.029,27.886,11.222,28.545,10.229,28.545z M14.921,28.223  c-0.992,0-1.799-0.659-1.799-1.468c0-0.811,0.807-1.47,1.799-1.47s1.799,0.659,1.799,1.47  C16.721,27.564,15.914,28.223,14.921,28.223z M14.921,24.319c-1.055,0-1.976,0.479-2.481,1.19c-0.531-0.53-1.325-0.868-2.211-0.868  c-0.797,0-1.521,0.273-2.043,0.714c0.489-1.524,0.893-3.599,0.7-6.052c-0.202-2.562-1.287-4.567-2.354-5.96 c1.479,0.807,3.325,1.24,5.331,1.244c2.45-0.004,4.665-0.648,6.258-1.836c-1.027,1.443-2.071,3.557-2.13,6.227  c-0.055,2.552,0.507,4.666,1.108,6.179C16.568,24.645,15.79,24.319,14.921,24.319z"/> </g> </svg>

#svgClean{
填充：0.5%0.5%0.5%0.5%；
宽度：250px；
高度：250px；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
边框：3px实心#000000；
-webkit边框左上半径：15%；
-webkit边框右上半径：15%；
-webkit边框右下半径：15%；
-webkit边框左下半径：15%；
-左上角moz边界半径：15%；
-moz边界半径右上角：15%；
-moz边界半径右下角：15%；
-左下角moz边界半径：15%；
边界左上半径：15%；
边界右上角半径：15%；
边框右下半径：15%；
边界左下半径：15%；
背景：径向梯度（中心，圆覆盖，#7d7e7d1%，#000000100%）；
背景：-o-径向梯度（中心，圆覆盖，#7d7e7d1%，#000000100%）；
背景：-ms径向梯度（中心，圆盖，#7d7e7d 1%，#000000 100%）；
背景：-莫兹径向梯度（中心，圆覆盖，#7d7e7d1%，#000000100%）；
背景：-webkit径向梯度（中心，圆盖，#7d7e7d 1%，#000000 100%）；-webkit盒阴影：0rem 0rem 1rem#000000；
-moz盒阴影：0rem 0rem 1rem#000000；
框阴影：0rem 0rem 1rem#000000；-webkit框阴影：0rem 0rem 1rem#000000；
-moz盒阴影：0rem 0rem 1rem#000000；
长方体阴影：0rem 0rem 1rem#000000；}
g{
填充：url（#rgrad）；
过滤器：url（#放置阴影）；
行程：#000；
笔画宽度：0.1%；
} 

不允许在SVG中混合和匹配单位。使用视口指定单位-此后，只能使用这些视口单位或边界框的百分比。您不能决定以混合百分比的像素指定过滤器尺寸：这是不允许的。我很惊讶任何东西都在渲染。此版本的过滤器适用于Chrome、Firefox和IE（我运行Windows）：

---

类似地，您正在为径向渐变指定userSpaceOnUse（即viewbox单位），但随后将所有标注指定为%——这是objectBoundingBox单位

技术上不允许以“像素”为单位指定宽度（注意：这意味着不是像素），但因为默认情况下，

filternits=“objectBoundingBox”

对于

width=“250px”

实际得到的是边界框宽度的250倍。Chrome中有一个bug，看起来最近已经修复，这使得最初的示例与Firefox中的工作原理相同。

<filter height="100%" width="100%" y="0%" x="0%" primitiveUnits="objectBoundingBox" id="drop-shadow"> 
    <feGaussianBlur stdDeviation="0.01" in="SourceAlpha"/>
    <feOffset result="offsetblur" dy="0.02" dx="0.01"/>
    <feFlood flood-color="black"/>
    <feComposite operator="in" in2="offsetblur"/>
    <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>