SVG - 필터 및 CSS 크로스 브라우저 문제

Question

Firefox에서만 내 SVG가 올바르게 표시됩니다. 아무도 내가 뭘 잘못했는지 말해 줄 수 있습니까? 여기

바이올린
http://jsfiddle.net/kLg5sd08/

당신은 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> 

Answer 1

SVG. 당신은 당신의 단위를 viewBox로 지정합니다 - 그 후에는 그 viewBox 단위 나 경계 상자의 % 만 사용할 수 있습니다. 비율로 섞은 픽셀 단위로 필터 크기를 지정할 수 없습니다. 허용되지 않습니다. 나는 아무것도 렌더링하는 것이 전혀 놀랍다. 필터의이 버전은 크롬에서 작동, 파이어 폭스 & IE (I Windows를 실행) :

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

마찬가지로, 당신은 당신의 방사형 그라데이션을 위해 UserSpaceOnUse이면 (즉, 뷰 박스 단위)을 지정하고, 그러나 %의 모든 차원을 지정 's - objectBoundingBox 단위입니다.