Question

我正在尝试使用stroke-dasharray和stroke-dashoffset创建一个简单的线条图。它在FF上工作正常但在Chrome和Safari上根本没有显示，我无法弄清楚原因。任何帮助将不胜感激！

<?xml version="1.0" encoding="utf-8"?>
<html>

<head>

  <style>
    .cloud{
      fill:none;
      stroke-dasharray:900;
      stroke-dashoffset:900;
      animation: dash 2s linear infinite;
    }
    @keyframes dash {
      from {stroke-dashoffset:900}
      to {stroke-dashoffset:0}
      transition-timing-function: ease-in;
    }

    .center{
      margin-left:auto;
      margin-right:auto;
      margin-top:20px;
      width:320px;
  }
  </style>

</head>

<body>

<div class="center">
  <svg 
   version="1.1" 
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="0 0 316 230"
   width="316" height="230">

  <path class="cloud" stroke="#4cb2e1" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10" 
  d="M61.8,55.8
  c-33.4,4.2-57,34.7-52.7,68c3.9,31,30.5,53.5,61,53.2c0,0.3,0.1,0.6,0.1,0.8c3,23.3,24.2,39.7,47.5,36.8
  c13.5-1.7,24.8-9.6,31.2-20.5c11.1,17.6,31.8,28.2,53.9,25.4c23-2.9,40.9-19.5,46.6-40.6c4.2,0.5,8.5,0.5,12.8,0
  c28.5-3.6,48.6-29.6,45-58c-2.3-18.1-13.7-32.8-28.9-40.2c0-2.4-0.1-4.8-0.4-7.2c-3.5-27.6-28.7-47.1-56.3-43.6
  c-6.7,0.8-12.9,3-18.5,6.1c-12.6-21-36.7-33.7-62.5-30.4c-28.3,3.6-49.9,25.3-54.6,52.1"/>
</svg>
</div>

</body>

</html>

Answer 1

基于Webkit和Blink的浏览器仍然需要-webkit-和animation的{{1}}前缀。只需提供带前缀的那些项目的副本，所有项目都应该有效。

@keyframes

使用@keyframes-dash在SV和Safari上显示的SVG动画线条画

1 个答案: