css - 来自 css 的 SVG 填充和过滤 url 不适用于 safari

标签 css svg safari svg-filters

我为我的个人网站创建了一个动画，它在 Chrome 和 Firefox 中运行没有问题，我不关心 IE，但它在 Safari 上不起作用，我想是因为 Safari 无法识别 fill:url( ..) 和 filter: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 移动到 <defs> 中标记无济于事，它不起作用。我希望这是我犯的一个简单错误。

最佳答案

问题不在于填充和过滤器的 url，而是 fill:none，我不得不使用 fill: ('#..') 和 fill-opacity:0.01 并在关键帧期间将 fill-opacity 更改为 1，这有点问题，但暂时可以完成工作，如果有人有其他解决方案，请分享。

关于css - 来自 css 的 SVG 填充和过滤 url 不适用于 safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38777495/

上一篇：CSS 并不总是在 Jekyll/Bootstrap 站点中正确呈现

下一篇：html - 固定 div 的右侧溢出其父级

相关文章：

CSS3 动画 SVG 对象的多个属性在 Safari 中不起作用

javascript - 如何在 MAC Safari 浏览器中使用 Javascript 获取 PC 的本地 IP 地址？

css - "pt"从 Chrome 和 Safari 打印时尺寸显示不一致

javascript - ReactJs - 加载跨域资源

automation - 从文本文件渲染 UML 图

javascript - 添加额外文本元素的事件监听器

javascript - jQuery 等待显示()？得到错误的数据

css - 在 css 的 div 中设计所有 'pre' 标签

html - 背景图像在 react 中不起作用

javascript - 删除一个类并添加另一个类(附加 HTML 标签 onclick)

©2024 IT工具网  联系我们