html - Firefox 中的 SVG 宽度属性 css 动画

标签 html css svg css-animations svg-animate

SVG 宽度属性 css 动画在 Firefox 中不起作用，但在 Chrome 中工作得很好。请检查下面的代码片段演示。

我的代码有什么问题吗？有没有办法在属性宽度上应用动画？

svg {
  display: inline-block;
}


@-moz-keyframes glareAnim1 {
  0% {
    width: 0;
  }
  50% {
    width: 10px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes glareAnim1 {
  0% {
    width: 0;
  }
  50% {
    width: 10px;
  }
  100% {
    width: 0;
  }
}
@keyframes glareAnim1 {
  0% {
    width: 0;
  }
  50% {
    width: 10px;
  }
  100% {
    width: 0;
  }
}
.glare-top {
  -moz-animation: glareAnim1 2s linear infinite;
  -webkit-animation: glareAnim1 2s linear infinite;
  animation: glareAnim1 2s linear infinite;
}

@-moz-keyframes glareAnim2 {
  0% {
    width: 10px;
  }
  50% {
    width: 0;
  }
  100% {
    width: 10px;
  }
}
@-webkit-keyframes glareAnim2 {
  0% {
    width: 10px;
  }
  50% {
    width: 0;
  }
  100% {
    width: 10px;
  }
}
@keyframes glareAnim2 {
  0% {
    width: 10px;
  }
  50% {
    width: 0;
  }
  100% {
    width: 10px;
  }
}
.glare-bottom {
  -moz-animation: glareAnim2 2s linear infinite;
  -webkit-animation: glareAnim2 2s linear infinite;
  animation: glareAnim2 2s linear infinite;
}

@-moz-keyframes translateDoor {
  0% {
    -moz-transform: translate(-1px, 0);
    transform: translate(-1px, 0);
    opacity: 1;
    width: 1px;
    height: 6px;
  }
  15% {
    width: 4px;
  }
  50% {
    -moz-transform: translate(16px, 0);
    transform: translate(16px, 0);
    opacity: 1;
    width: 2px;
  }
  51% {
    opacity: 0;
  }
  100% {
    -moz-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0;
  }
}
@-webkit-keyframes translateDoor {
  0% {
    -webkit-transform: translate(-1px, 0);
    transform: translate(-1px, 0);
    opacity: 1;
    width: 1px;
    height: 6px;
  }
  15% {
    width: 4px;
  }
  50% {
    -webkit-transform: translate(16px, 0);
    transform: translate(16px, 0);
    opacity: 1;
    width: 2px;
  }
  51% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0;
  }
}
@keyframes translateDoor {
  0% {
    -moz-transform: translate(-1px, 0);
    -ms-transform: translate(-1px, 0);
    -webkit-transform: translate(-1px, 0);
    transform: translate(-1px, 0);
    opacity: 1;
    width: 1px;
    height: 6px;
  }
  15% {
    width: 4px;
  }
  50% {
    -moz-transform: translate(16px, 0);
    -ms-transform: translate(16px, 0);
    -webkit-transform: translate(16px, 0);
    transform: translate(16px, 0);
    opacity: 1;
    width: 2px;
  }
  51% {
    opacity: 0;
  }
  100% {
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0;
  }
}
.researchDoor {
  fill: #464949;
  -moz-animation: translateDoor 5s linear infinite;
  -webkit-animation: translateDoor 5s linear infinite;
  animation: translateDoor 5s linear infinite;
}

.research0 {
  fill: #FFFFFF;
  stroke: #464949;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.research1 {
  fill: #FCBD38;
  overflow: hidden;
}

.research2 {
  fill: #464949;
}

.research3 {
  fill: none;
  stroke: #464949;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-miterlimit: 10;
}
<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 120" style="enable-background:new 0 0 100 120;" xml:space="preserve">

  <path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
  <g id="XMLID_40_">
    <rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5" />
    <path class="research2" d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
  </g>
  <polygon id="XMLID_43_" class="research3" points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2 	" />
  <!--  door    -->
  <rect x="41" y="28.9" class="researchDoor" />
  <!--   left top wind  -->
  <rect x="30" class="glare-top" y="28" fill="#464949" width="14" height="2" />
  <!--   left bottom wind    -->
  <rect x="30" class="glare-bottom" y="32" fill="#464949" width="14" height="2" />
  <!--   right top wind  -->
  <rect x="62" y="28" class="glare-top" fill="#464949" width="14" height="2" />
  <!--   right bottom wind    -->
  <rect x="62" y="32" class="glare-bottom" fill="#464949" width="14" height="2" />
  <!--   
  <line id="glareLeftTop" class="research3" x1="36.6" y1="28.7" x2="32.8" y2="28.7"/>
  <line id="glareLeftBottom" class="research3" x1="36.6" y1="33.3" x2="23.8" y2="33.3"/> 
  <line id="glareTopRight" class="research3" x1="62.9" y1="28.7" x2="66.6" y2="28.7"/>
  <line id="glareTopBottom" class="research3" x1="62.9" y1="33.3" x2="75.6" y2="33.3"/>
  -->
  <line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
  <line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
  <line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
  <line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
  <line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
  <line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
  <g id="XMLID_49_">
    <path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
			c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
  </g>
</svg>

最佳答案

考虑在动画中使用笔画宽度等于矩形高度的线条，而不是矩形。

lines-dasharray 线将用于动画。

  • 对于等于 10px 的动画线，在 0% {Stroke-dasharray: 0.10;} 处 该行将被隐藏

  • 在 50% {行程-dasharray: 10,0;} 时，该行将完整显示

  • 在 100% {行程-dasharray: 0.10;} 时，该线将再次隐藏

.glare-top {
  -webkit-animation: glareAnim1 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim1 2s linear infinite;
}

@-webkit-keyframes glareAnim1 {
  0% {stroke-dasharray:0,10;}
  50% {stroke-dasharray:10,10;}
  100%{stroke-dasharray:0,10;}
}
.glare-bottom {
   -webkit-animation: glareAnim2 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim2 2s linear infinite;
}
@-webkit-keyframes glareAnim2 {
  0% {stroke-dasharray:10,0;}
  50% {stroke-dasharray:0,10;}
  100%{stroke-dasharray:10,0;}
}
<svg version="1.1"  viewBox="0 0 100 120" >
<!--   left top wind  -->
      <polyline class="glare-top" points="27,28 37,28" stroke="#464949"  stroke-width="2" /> 
 <!--   left bottom wind    -->
      <polyline class="glare-bottom" points="27,33 37,33" stroke="#464949"  stroke-width="2" /> 
  </svg>

我已经缩短了您的代码以显示线条和门的基本动画。

svg {
  display: inline-block;
}
.glare-top {
  -webkit-animation: glareAnim1 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim1 2s linear infinite;
}

@-webkit-keyframes glareAnim1 {
  0% {stroke-dasharray:0,10;}
  50% {stroke-dasharray:10,10;}
  100%{stroke-dasharray:0,10;}
}
@keyframes glareAnim1 {
  0% {stroke-dasharray:0,10;}
  50% {stroke-dasharray:10,10;}
  100%{stroke-dasharray:0,10;}
}

.glare-bottom {
  -moz-animation: glareAnim2 2s linear infinite;
  -webkit-animation: glareAnim2 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim2 2s linear infinite;
}
@-webkit-keyframes glareAnim2 {
  0% {stroke-dasharray:10,0;}
  50% {stroke-dasharray:0,10;}
  100%{stroke-dasharray:10,0;}
}
@keyframes glareAnim2 {
 0% {stroke-dasharray:10,0;}
  50% {stroke-dasharray:0,10;}
  100%{stroke-dasharray:10,0;}
}

.researchDoor {
  fill: #464949;
  stroke-dasharray:0,6;
   animation: translateDoor 5s linear infinite;
}

@keyframes translateDoor {
  0% {
    transform: translate(-1px, 0);
    opacity: 1;
    stroke-dasharray:0,6;
  }
  15% {
   stroke-dasharray:1.4,4.6;
  }
  50% {
    transform: translate(8px, 0); 
     stroke-dasharray:5,1;
    
  }
   70% {
    transform: translate(12.8px, 0); 
     stroke-dasharray:3.5,2.5;
    
  }
    
  100% {
        
    transform: translateX(16px);
    stroke-dasharray:0,6;
      }
}


.research0 {
  fill: #FFFFFF;
  stroke: #464949;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.research1 {
  fill: #FCBD38;
  overflow: hidden;
}

.research2 {
  fill: #464949;
}

.research3 {
  fill: none;
  stroke: #464949;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-miterlimit: 10;
}
<svg version="1.1"  viewBox="0 0 100 120" >

  <path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
  <g id="XMLID_40_">
    <rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5"  />
    <path class="research2"  d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
  </g>
  <polygon id="XMLID_43_" class="research3"  points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2    " />
  <!--  door    -->
   <!-- <rect x="41" y="28.9" class="researchDoor" />  -->
    <polyline class="researchDoor" points="41,32 47,32" stroke="#464949"  stroke-width="6" /> 
  <!--   left top wind  -->
      <polyline class="glare-top" points="27,28 37,28" stroke="#464949"  stroke-width="2" /> 
  <!--   right top wind  -->
   <polyline class="glare-top" points="  62,28 72,28" stroke="#464949"  stroke-width="2" />

 <!--   left bottom wind    -->
      <polyline class="glare-bottom" points="27,33 37,33" stroke="#464949"  stroke-width="2" /> 
 
 <!--   right bottom wind    -->
      <polyline class="glare-bottom" points="  62,33 72,33" stroke="#464949"  stroke-width="2" />
  
    
 
  <line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
  <line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
  <line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
  <line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
  <line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
  <line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
  <g id="XMLID_49_">
    <path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
            c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
  </g>
</svg>

关于html - Firefox 中的 SVG 宽度属性 css 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36278031/

上一篇：twitter-bootstrap - Safari 和 bootstrap 软连字符错误 : What’s going on?

下一篇：javafx - 如何换行 javafx 图表图例的文本

相关文章：

jquery - Bootstrap 不工作，找不到文件

CSS:除内容外的任何内容都已修复

javascript - 使用 Snap SVG 将 SVG 加载到特定的 div

javascript - 为什么动画 D3 示例在 Chrome 而不是 Firefox 中工作

css - float :left div's 的垂直对齐

javascript - 为什么我的下拉菜单代码不起作用

javascript - 为现有元素添加点击叠加

html - 将图像裁剪成正方形，然后使用纯 CSS 将其转成圆形？

javascript - 使用 css 或在背景中使用等距柱状 map 投影将 map 设置为背景

javascript - 您可以更改在多选中滚动的元素数吗

©2024 IT工具网  联系我们