问题：
SVG从不在safari上工作的css中填充和筛选URL
阳博赡
我为我的个人网站创建了一个动画，它可以在Chrome和Firefox中运行，没有任何问题，我也不关心IE，但它不能在Safari上运行，我想是因为Safari不会识别fill：url（..）和筛选器：URL（..）从分离的css文件。下面是CodePen的实际动画链接：http://codepen.io/getturnt/pen/kxreww我真的想知道发生了什么。
下面是实际代码：
.container {
width:50%;
height:50%;
padding: 0 25%;
}
.st0 {
fill:none;
stroke:#E27A4D;
stroke-width:31;
stroke-miterlimit:10;
stroke-dasharray:228.0897;
opacity:0.9;
stroke-dashoffset: -228.0897;
animation-name: line1;
animation-duration: .25s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes line1 {
0% {
stroke-dashoffset: -228.0897;
}
70% {
stroke-dashoffset: -50;
}
80% {
stroke-dashoffset: -30;
}
90%{
stroke-dashoffset: -15;
}
100%{
stroke-dashoffset: 0;
}
}
.st1 {
fill:none;
stroke:#E27A4D;
stroke-width:31;
stroke-miterlimit:10;
stroke-dasharray:191.6966;
opacity:0.9;
stroke-dashoffset: 191.6966;
animation-name: line2;
animation-duration: .25s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes line2 {
0% {
stroke-dashoffset: 191.6966;
}
70% {
stroke-dashoffset: 50;
}
80% {
stroke-dashoffset: 30;
}
90%{
stroke-dashoffset: 15;
}
100%{
stroke-dashoffset: 0;
}
}
.st2 {
fill:none;
stroke:#E27A4D;
stroke-width:31;
stroke-miterlimit:10;
stroke-dasharray:228.2286;
opacity:0.9;
stroke-dashoffset: 228.2286;
animation-name: line3;
animation-duration: .25s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes line3 {
0% {
stroke-dashoffset: 228.2286;
}
70% {
stroke-dashoffset: 50;
}
80% {
stroke-dashoffset: 30;
}
90%{
stroke-dashoffset: 15;
}
100%{
stroke-dashoffset: 0;
}
}
.st3 {
fill:none;
stroke:#E27A4D;
stroke-width:31;
stroke-miterlimit:10;
stroke-dasharray:228.2286;
opacity:0.9;
stroke-dashoffset: 228.2286;
animation-name: line4;
animation-duration: .25s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes line4 {
0% {
stroke-dashoffset: 228.2286;
}
70% {
stroke-dashoffset: 50;
}
80% {
stroke-dashoffset: 30;
}
90%{
stroke-dashoffset: 15;
}
100%{
stroke-dashoffset: 0;
}
}
.st4 {
fill:none;
stroke:#E27A4D;
stroke-miterlimit:10;
stroke-dasharray:411;
stroke-dashoffset:411;
filter:url(#dropshadow);
animation-name: m;
animation-duration: .75s;
animation-delay: 2.5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes m {
0% {
stroke-dashoffset: 411;
stroke-width: 1;
}
70% {
stroke-dashoffset: 0;
stroke-width: 1;
}
90%{
stroke-dashoffset: 0;
stroke-width: 0;
}
100%{
fill:url(#SVGID_1_);
stroke-dashoffset: 0;
stroke-width: 0;
}
}
.st5 {
fill:none;
stroke:#E27A4D;
stroke-miterlimit:10;
stroke-dasharray:162;
stroke-dashoffset:162;
filter:url(#dropshadow);
animation-name: p1;
animation-duration: .5s;
animation-delay: 2.5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes p1 {
0% {
stroke-dashoffset: 162;
stroke-width: 1;
}
70% {
stroke-dashoffset: 0;
stroke-width: 1;
}
90%{
stroke-dashoffset: 0;
stroke-width: 0;
}
100%{
fill:url(#SVGID_2_);
stroke-dashoffset: 0;
stroke-width: 0;
}
}
.st6 {
fill:none;
stroke:#E27A4D;
stroke-miterlimit:10;
stroke-dasharray:161;
stroke-dashoffset:161;
filter:url(#dropshadow);
animation-name: p2;
animation-duration: .5s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes p2 {
0% {
stroke-dashoffset: 161;
stroke-width: 1;
}
70% {
stroke-dashoffset: 0;
stroke-width: 1;
}
90%{
stroke-dashoffset: 0;
stroke-width: 0;
}
100%{
fill:url(#SVGID_3_);
stroke-dashoffset: 0;
stroke-width: 0;
}
}
.st7 {
fill:none;
stroke:#E27A4D;
stroke-miterlimit:10;
stroke-dasharray:381;
stroke-dashoffset:381;
filter:url(#dropshadow);
animation-name: c;
animation-duration: .75s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes c {
0% {
stroke-dashoffset: 381;
stroke-width: 1;
}
70% {
stroke-dashoffset: 0;
stroke-width: 1;
}
90%{
stroke-dashoffset: 0;
stroke-width: 0;
}
100%{
fill:url(#SVGID_4_);
stroke-dashoffset: 0;
stroke-width: 0;
}
}<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 305.7 217.6" style="enable-background:new 0 0 305.7 217.6;" xml:space="preserve">
<radialGradient id="SVGID_1_" cx="62.4629" cy="34.0002" r="39.9731" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#383D48"/>
<stop offset="1" style="stop-color:#23262D"/>
</radialGradient>
<radialGradient id="SVGID_2_" cx="147.3418" cy="93.7559" r="20.996" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#383D48"/>
<stop offset="1" style="stop-color:#23262D"/>
</radialGradient>
<radialGradient id="SVGID_3_" cx="152.9411" cy="99.3551" r="20.885" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#383D48"/>
<stop offset="1" style="stop-color:#23262D"/>
</radialGradient>
<radialGradient id="SVGID_4_" cx="243.2371" cy="159" r="39.9731" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#383D48"/>
<stop offset="1" style="stop-color:#23262D"/>
</radialGradient>
<defs>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="7" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.35"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<line class="st0" x1="96.5" y1="34" x2="288.4" y2="34"/>
<line class="st1" x1="17.3" y1="96.5" x2="152.8" y2="96.5"/>
<line class="st2" x1="288.4" y1="96.5" x2="152.8" y2="96.5"/>
<line class="st3" x1="17.3" y1="159" x2="209.4" y2="159"/>
<path class="st4" d="M17.3,0l45.2,31l45.2-31v68H87.1V36.8L62.5,54.9L37.8,36.8V68H17.3V0z"/>
<g>
<polygon class="st5" points="131.3,114.8 136.4,109.7 134.4,107.7 161.3,80.8 163.3,82.8 168.3,77.7 163.4,72.8 150.1,86.1
136.8,72.8 126.3,83.3 139.6,96.5 126.3,109.8 "/>
<polygon class="st6" points="160.5,96.5 173.8,83.2 169.1,78.5 164,83.5 165.8,85.3 138.9,112.2 137.1,110.4 132.1,115.5
136.8,120.2 150.1,107 163.3,120.2 173.8,109.8 "/>
</g>
<path class="st7" d="M288.4,185.3c-9.4,4.8-21.7,7.7-35.7,7.7c-32.5,0-54.6-14.6-54.6-34s22.1-34,54.6-34c14,0,26.3,2.8,35.7,7.7
l-9.9,15c-6.9-3.1-16.3-5.2-25.8-5.2c-16.3,0-30,6.2-30,16.6c0,10.4,13.7,16.6,30,16.6c9.5,0,18.9-2.1,25.8-5.2L288.4,185.3z"/>
</svg>
</div>请注意，我尝试使用fill:url('#hash')、fill:url('/#hash')并将radialGradient移动到
标记中，但没有用，它不起作用。我希望这只是我犯的一个简单的错误。
共有1个答案
费秦迟
问题不是填充和过滤器的URL而是fill:none，我必须使用fill:('#..')和fill-opacity:0.01并在关键帧期间将fill-opacity:0.01更改为1，这有一点缺陷，但它可以暂时完成工作，如果有人有其他解决方案，请分享。
类似资料：
-
我正在尝试让以下SVG在所有主要浏览器中工作： 这就是我正在努力实现的结果（Chrome）： 在Firefox中，这是很好的，但斜面不是那么明显： 下面是代码页：https://codepen.io/jugglingcats/pen/grpwobk。 非常感谢任何帮助！！
-
当我悬停的时候，我怎样才能填充这个svg？我看了大量的文档，尝试了几种方法，但都没有成功。 这是我的网页： 我在css中尝试了以下内容 以及 甚至 我做错了什么？我应该能够用css完成这项任务，对吗？ 编辑：请注意，此图像正被用作背景图像。下面的css中有更多细节： 编辑2：这是. svg代码，但不确定它是否重要
-
我有一个SVG线条动画绘制文本，但它似乎不能在Safari或Internet Explorer上工作。是不是我漏了什么？ http://codepen.io/anon/pen/vygdzv CSS
-
我有一个SVG径向渐变可以在Chrome、Firefox甚至Internet Explorer中工作，但在Safari中不工作。你知道怎么在Safari里用这个吗？ 下面是代码页：http://codepen.io/fractorr/pen/ovayvv
-
我做了一个动画为一些元素（图像和按钮）淡入淡出使用不透明度。除了Safari之外，它在所有浏览器上都能完美地工作。当我尝试在Safari中运行它时，我的所有元素都有100%的不透明度，没有任何动画可以看到… 来自button元素的示例： 以下是我的HTML： 和我的CSS：
-
我目前正在尝试将网站上使用的徽标应用于打印页面上的某个位置。这样做，我想以不同的方式填充它。然而，填充效果似乎不起作用。 当我在单独的选项卡中查看logo.svg并检查它时，我可以成功地用新颜色填充它的两个组件中的每一个。 但是，当我将它作为背景图像带入打印页面上的DIV时，填充不再起作用。有人能告诉我这是什么原因吗？ 在SVG页面上，我可以成功地完成以下操作。 （正如我前面提到的，SVG似乎由两