feGaussianBlur在Safari或IE上無法正常工作？

Question

我檢查過Safari中支持feGaussianBlur，但它爲什麼沒有在瀏覽器上顯示模糊效果？任何人都可以對此有所瞭解嗎？

是否有東西丟失或需要額外檢查，特別是對於Safari和IE？它在Google Chrome和Firefox上運行良好。

#container { 
 
\t margin: 0 auto 
 
\t border:1px solid #fff; 
 
\t width: 100%; 
 
\t min-height: 500px; 
 
\t position: relative; 
 
\t padding-top: 50%; 
 
} 
 

 
.cssload-dots { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t left: 50%; 
 
\t position: absolute; 
 
\t filter: url(#goo); 
 
\t \t -o-filter: url(#goo); 
 
\t \t -ms-filter: url(#goo); 
 
\t \t -webkit-filter: url(#goo); 
 
\t \t -moz-filter: url(#goo); 
 
} 
 

 
.cssload-dot { 
 
\t width: 0; 
 
\t height: 0; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
} 
 

 
.cssload-dot:before { 
 
\t content: ""; 
 
\t width: 34px; 
 
\t height: 34px; 
 
\t -webkit-border-radius: 49px; 
 
\t -moz-border-radius: 49px; 
 
\t border-radius: 49px; 
 
\t background: rgb(251,211,1); 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t transform: translateY(0); 
 
\t \t -o-transform: translateY(0); 
 
\t \t -ms-transform: translateY(0); 
 
\t \t -webkit-transform: translateY(0); 
 
\t \t -moz-transform: translateY(0); 
 
\t margin-left: -17.5px; 
 
\t margin-top: -17.5px; 
 
} 
 

 
.cssload-dot:nth-child(5):before { 
 
\t z-index: 100; 
 
\t width: 44.5px; 
 
\t height: 44.5px; 
 
\t margin-left: -21.75px; 
 
\t margin-top: -21.75px; 
 
\t animation: cssload-dot-colors 3s ease infinite; 
 
\t \t -o-animation: cssload-dot-colors 3s ease infinite; 
 
\t \t -ms-animation: cssload-dot-colors 3s ease infinite; 
 
\t \t -webkit-animation: cssload-dot-colors 3s ease infinite; 
 
\t \t -moz-animation: cssload-dot-colors 3s ease infinite; 
 
} 
 

 
.cssload-dot:nth-child(1) { 
 
\t animation: cssload-dot-rotate-1 3s 0s linear infinite; 
 
\t \t -o-animation: cssload-dot-rotate-1 3s 0s linear infinite; 
 
\t \t -ms-animation: cssload-dot-rotate-1 3s 0s linear infinite; 
 
\t \t -webkit-animation: cssload-dot-rotate-1 3s 0s linear infinite; 
 
\t \t -moz-animation: cssload-dot-rotate-1 3s 0s linear infinite; 
 
} 
 

 
.cssload-dot:nth-child(1):before { 
 
\t background-color: rgb(255,50,112); 
 
\t animation: cssload-dot-move 3s 0s ease infinite; 
 
\t \t -o-animation: cssload-dot-move 3s 0s ease infinite; 
 
\t \t -ms-animation: cssload-dot-move 3s 0s ease infinite; 
 
\t \t -webkit-animation: cssload-dot-move 3s 0s ease infinite; 
 
\t \t -moz-animation: cssload-dot-move 3s 0s ease infinite; 
 
} 
 

 
.cssload-dot:nth-child(2) { 
 
\t animation: cssload-dot-rotate-2 3s 0.75s linear infinite; 
 
\t \t -o-animation: cssload-dot-rotate-2 3s 0.75s linear infinite; 
 
\t \t -ms-animation: cssload-dot-rotate-2 3s 0.75s linear infinite; 
 
\t \t -webkit-animation: cssload-dot-rotate-2 3s 0.75s linear infinite; 
 
\t \t -moz-animation: cssload-dot-rotate-2 3s 0.75s linear infinite; 
 
} 
 

 
.cssload-dot:nth-child(2):before { 
 
\t background-color: rgb(32,139,241); 
 
\t animation: cssload-dot-move 3s 0.75s ease infinite; 
 
\t \t -o-animation: cssload-dot-move 3s 0.75s ease infinite; 
 
\t \t -ms-animation: cssload-dot-move 3s 0.75s ease infinite; 
 
\t \t -webkit-animation: cssload-dot-move 3s 0.75s ease infinite; 
 
\t \t -moz-animation: cssload-dot-move 3s 0.75s ease infinite; 
 
} 
 

 
.cssload-dot:nth-child(3) { 
 
\t animation: cssload-dot-rotate-3 3s 1.5s linear infinite; 
 
\t \t -o-animation: cssload-dot-rotate-3 3s 1.5s linear infinite; 
 
\t \t -ms-animation: cssload-dot-rotate-3 3s 1.5s linear infinite; 
 
\t \t -webkit-animation: cssload-dot-rotate-3 3s 1.5s linear infinite; 
 
\t \t -moz-animation: cssload-dot-rotate-3 3s 1.5s linear infinite; 
 
} 
 

 
.cssload-dot:nth-child(3):before { 
 
\t background-color: rgb(175,225,2); 
 
\t animation: cssload-dot-move 3s 1.5s ease infinite; 
 
\t \t -o-animation: cssload-dot-move 3s 1.5s ease infinite; 
 
\t \t -ms-animation: cssload-dot-move 3s 1.5s ease infinite; 
 
\t \t -webkit-animation: cssload-dot-move 3s 1.5s ease infinite; 
 
\t \t -moz-animation: cssload-dot-move 3s 1.5s ease infinite; 
 
} 
 

 
.cssload-dot:nth-child(4) { 
 
\t animation: cssload-dot-rotate-4 3s 2.25s linear infinite; 
 
\t \t -o-animation: cssload-dot-rotate-4 3s 2.25s linear infinite; 
 
\t \t -ms-animation: cssload-dot-rotate-4 3s 2.25s linear infinite; 
 
\t \t -webkit-animation: cssload-dot-rotate-4 3s 2.25s linear infinite; 
 
\t \t -moz-animation: cssload-dot-rotate-4 3s 2.25s linear infinite; 
 
} 
 

 
.cssload-dot:nth-child(4):before { 
 
\t background-color: rgb(251,211,1); 
 
\t animation: cssload-dot-move 3s 2.25s ease infinite; 
 
\t \t -o-animation: cssload-dot-move 3s 2.25s ease infinite; 
 
\t \t -ms-animation: cssload-dot-move 3s 2.25s ease infinite; 
 
\t \t -webkit-animation: cssload-dot-move 3s 2.25s ease infinite; 
 
\t \t -moz-animation: cssload-dot-move 3s 2.25s ease infinite; 
 
} 
 

 
@keyframes cssload-dot-move { 
 
\t 0% { 
 
\t \t transform: translateY(0); 
 
\t } 
 
\t 18%, 22% { 
 
\t \t transform: translateY(-68px); 
 
\t } 
 
\t 40%, 100% { 
 
\t \t transform: translateY(0); 
 
\t } 
 
} 
 

 
@-o-keyframes cssload-dot-move { 
 
\t 0% { 
 
\t \t -o-transform: translateY(0); 
 
\t } 
 
\t 18%, 22% { 
 
\t \t -o-transform: translateY(-68px); 
 
\t } 
 
\t 40%, 100% { 
 
\t \t -o-transform: translateY(0); 
 
\t } 
 
} 
 

 
@-ms-keyframes cssload-dot-move { 
 
\t 0% { 
 
\t \t -ms-transform: translateY(0); 
 
\t } 
 
\t 18%, 22% { 
 
\t \t -ms-transform: translateY(-68px); 
 
\t } 
 
\t 40%, 100% { 
 
\t \t -ms-transform: translateY(0); 
 
\t } 
 
} 
 

 
@-webkit-keyframes cssload-dot-move { 
 
\t 0% { 
 
\t \t -webkit-transform: translateY(0); 
 
\t } 
 
\t 18%, 22% { 
 
\t \t -webkit-transform: translateY(-68px); 
 
\t } 
 
\t 40%, 100% { 
 
\t \t -webkit-transform: translateY(0); 
 
\t } 
 
} 
 

 
@-moz-keyframes cssload-dot-move { 
 
\t 0% { 
 
\t \t -moz-transform: translateY(0); 
 
\t } 
 
\t 18%, 22% { 
 
\t \t -moz-transform: translateY(-68px); 
 
\t } 
 
\t 40%, 100% { 
 
\t \t -moz-transform: translateY(0); 
 
\t } 
 
} 
 

 
@keyframes cssload-dot-colors { 
 
\t 0% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
\t 25% { 
 
\t \t background-color: rgb(255,50,112); 
 
\t } 
 
\t 50% { 
 
\t \t background-color: rgb(32,139,241); 
 
\t } 
 
\t 75% { 
 
\t \t background-color: rgb(175,225,2); 
 
\t } 
 
\t 100% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
} 
 

 
@-o-keyframes cssload-dot-colors { 
 
\t 0% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
\t 25% { 
 
\t \t background-color: rgb(255,50,112); 
 
\t } 
 
\t 50% { 
 
\t \t background-color: rgb(32,139,241); 
 
\t } 
 
\t 75% { 
 
\t \t background-color: rgb(175,225,2); 
 
\t } 
 
\t 100% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
} 
 

 
@-ms-keyframes cssload-dot-colors { 
 
\t 0% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
\t 25% { 
 
\t \t background-color: rgb(255,50,112); 
 
\t } 
 
\t 50% { 
 
\t \t background-color: rgb(32,139,241); 
 
\t } 
 
\t 75% { 
 
\t \t background-color: rgb(175,225,2); 
 
\t } 
 
\t 100% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
} 
 

 
@-webkit-keyframes cssload-dot-colors { 
 
\t 0% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
\t 25% { 
 
\t \t background-color: rgb(255,50,112); 
 
\t } 
 
\t 50% { 
 
\t \t background-color: rgb(32,139,241); 
 
\t } 
 
\t 75% { 
 
\t \t background-color: rgb(175,225,2); 
 
\t } 
 
\t 100% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
} 
 

 
@-moz-keyframes cssload-dot-colors { 
 
\t 0% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
\t 25% { 
 
\t \t background-color: rgb(255,50,112); 
 
\t } 
 
\t 50% { 
 
\t \t background-color: rgb(32,139,241); 
 
\t } 
 
\t 75% { 
 
\t \t background-color: rgb(175,225,2); 
 
\t } 
 
\t 100% { 
 
\t \t background-color: rgb(251,211,1); 
 
\t } 
 
} 
 

 
@keyframes cssload-dot-rotate-1 { 
 
\t 0% { 
 
\t \t transform: rotate(-105deg); 
 
\t } 
 
\t 100% { 
 
\t \t transform: rotate(270deg); 
 
\t } 
 
} 
 

 
@-o-keyframes cssload-dot-rotate-1 { 
 
\t 0% { 
 
\t \t -o-transform: rotate(-105deg); 
 
\t } 
 
\t 100% { 
 
\t \t -o-transform: rotate(270deg); 
 
\t } 
 
} 
 

 
@-ms-keyframes cssload-dot-rotate-1 { 
 
\t 0% { 
 
\t \t -ms-transform: rotate(-105deg); 
 
\t } 
 
\t 100% { 
 
\t \t -ms-transform: rotate(270deg); 
 
\t } 
 
} 
 

 
@-webkit-keyframes cssload-dot-rotate-1 { 
 
\t 0% { 
 
\t \t -webkit-transform: rotate(-105deg); 
 
\t } 
 
\t 100% { 
 
\t \t -webkit-transform: rotate(270deg); 
 
\t } 
 
} 
 

 
@-moz-keyframes cssload-dot-rotate-1 { 
 
\t 0% { 
 
\t \t -moz-transform: rotate(-105deg); 
 
\t } 
 
\t 100% { 
 
\t \t -moz-transform: rotate(270deg); 
 
\t } 
 
} 
 

 
@keyframes cssload-dot-rotate-2 { 
 
\t 0% { 
 
\t \t transform: rotate(165deg); 
 
\t } 
 
\t 100% { 
 
\t \t transform: rotate(540deg); 
 
\t } 
 
} 
 

 
@-o-keyframes cssload-dot-rotate-2 { 
 
\t 0% { 
 
\t \t -o-transform: rotate(165deg); 
 
\t } 
 
\t 100% { 
 
\t \t -o-transform: rotate(540deg); 
 
\t } 
 
} 
 

 
@-ms-keyframes cssload-dot-rotate-2 { 
 
\t 0% { 
 
\t \t -ms-transform: rotate(165deg); 
 
\t } 
 
\t 100% { 
 
\t \t -ms-transform: rotate(540deg); 
 
\t } 
 
} 
 

 
@-webkit-keyframes cssload-dot-rotate-2 { 
 
\t 0% { 
 
\t \t -webkit-transform: rotate(165deg); 
 
\t } 
 
\t 100% { 
 
\t \t -webkit-transform: rotate(540deg); 
 
\t } 
 
} 
 

 
@-moz-keyframes cssload-dot-rotate-2 { 
 
\t 0% { 
 
\t \t -moz-transform: rotate(165deg); 
 
\t } 
 
\t 100% { 
 
\t \t -moz-transform: rotate(540deg); 
 
\t } 
 
} 
 

 
@keyframes cssload-dot-rotate-3 { 
 
\t 0% { 
 
\t \t transform: rotate(435deg); 
 
\t } 
 
\t 100% { 
 
\t \t transform: rotate(810deg); 
 
\t } 
 
} 
 

 
@-o-keyframes cssload-dot-rotate-3 { 
 
\t 0% { 
 
\t \t -o-transform: rotate(435deg); 
 
\t } 
 
\t 100% { 
 
\t \t -o-transform: rotate(810deg); 
 
\t } 
 
} 
 

 
@-ms-keyframes cssload-dot-rotate-3 { 
 
\t 0% { 
 
\t \t -ms-transform: rotate(435deg); 
 
\t } 
 
\t 100% { 
 
\t \t -ms-transform: rotate(810deg); 
 
\t } 
 
} 
 

 
@-webkit-keyframes cssload-dot-rotate-3 { 
 
\t 0% { 
 
\t \t -webkit-transform: rotate(435deg); 
 
\t } 
 
\t 100% { 
 
\t \t -webkit-transform: rotate(810deg); 
 
\t } 
 
} 
 

 
@-moz-keyframes cssload-dot-rotate-3 { 
 
\t 0% { 
 
\t \t -moz-transform: rotate(435deg); 
 
\t } 
 
\t 100% { 
 
\t \t -moz-transform: rotate(810deg); 
 
\t } 
 
} 
 

 
@keyframes cssload-dot-rotate-4 { 
 
\t 0% { 
 
\t \t transform: rotate(705deg); 
 
\t } 
 
\t 100% { 
 
\t \t transform: rotate(1080deg); 
 
\t } 
 
} 
 

 
@-o-keyframes cssload-dot-rotate-4 { 
 
\t 0% { 
 
\t \t -o-transform: rotate(705deg); 
 
\t } 
 
\t 100% { 
 
\t \t -o-transform: rotate(1080deg); 
 
\t } 
 
} 
 

 
@-ms-keyframes cssload-dot-rotate-4 { 
 
\t 0% { 
 
\t \t -ms-transform: rotate(705deg); 
 
\t } 
 
\t 100% { 
 
\t \t -ms-transform: rotate(1080deg); 
 
\t } 
 
} 
 

 
@-webkit-keyframes cssload-dot-rotate-4 { 
 
\t 0% { 
 
\t \t -webkit-transform: rotate(705deg); 
 
\t } 
 
\t 100% { 
 
\t \t -webkit-transform: rotate(1080deg); 
 
\t } 
 
} 
 

 
@-moz-keyframes cssload-dot-rotate-4 { 
 
\t 0% { 
 
\t \t -moz-transform: rotate(705deg); 
 
\t } 
 
\t 100% { 
 
\t \t -moz-transform: rotate(1080deg); 
 
\t } 
 
}

<div id="container"> 
 
\t <div class="cssload-dots"> 
 
\t \t <div class="cssload-dot"></div> 
 
\t \t <div class="cssload-dot"></div> 
 
\t \t <div class="cssload-dot"></div> 
 
\t \t <div class="cssload-dot"></div> 
 
\t \t <div class="cssload-dot"></div> 
 
\t </div> 
 
</div> 
 

 
<svg> 
 
\t <defs> 
 
\t \t <filter id="goo"> 
 
\t \t \t <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12" /> 
 
\t \t \t <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 \t 0 1 0 0 0 \t 0 0 1 0 0 \t 0 0 0 18 -7" result="goo" /> 
 
\t \t \t <!-- <feBlend in2="goo" in="SourceGraphic" result="mix" ></feBlend> --> 
 
\t \t </filter> 
 
\t </defs> 
 
</svg>

Answer 1

三種可能的事情：

1. feColorMatrix應該有type="matrix"（模式是feBlend）
2. 野生動物園曾經有過，你必須把你的SVG的錯誤 定義在文檔中早於使用類時的定義。 I 認爲他們已經解決了這個問題 - 但在提及 是迴歸時提到了它。
3. 您應始終在前綴版本的末尾放置前綴爲前綴的 前綴版本的前綴。我 不知道Safari是否有前綴過濾器，但如果他們有（和 EOL'd -webkit），那麼它不知道該怎麼做。

IE/Edge不支持通過CSS使用SVG過濾器，所以這不應該在MSFT瀏覽器中工作。