即使我添加了-webkit- prefix，Stroke-dashoffset在safari上也不起作用。請幫助我。謝謝！....

這是我的示例代碼....

#path1 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}
.path2 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}

@keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

@-webkit-keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

Safari不支持負筆畫偏移......

不是那樣的& quotSafari不支持負的“筆畫偏移”，根據公認的答案。Safari實際上是遵循規范的。Chrome、Firefox等正在打破這個規范，可能是因為他們意識到這個規范定義得很差。

下面是SVG規范對筆畫-虛線偏移的定義。一些需要注意的事項:

正的筆畫-虛線偏移值不會使虛線從路徑的起點前進到路徑的終點:它們會使虛線向后移動。這是因為它被定義為& quot路徑開始處到虛線圖案的距離& quot，而不是& quot模式開始的路徑有多遠& quot如你所想。 負的筆畫-虛線偏移值不會準確地將虛線向后移動。也就是說，從& gt0到& lt0并不總是延續破折號的平穩行進。真正的行為是peculiar?，表面上看起來不可預測。 簡而言之，dashoffset的工作方式與您想象的完全不同。如果可能的話，你應該避免負值以避免混淆。

解決辦法

解決這個問題的常見方法是去掉負號并反轉動畫，這通常(可能總是？)應該會產生預期的效果:

#path {
  stroke-dasharray: 500;
  animation: dash 2s ease reverse;
}

@keyframes dash {
  from {
    stroke-dashoffset: 500;
  }
}

Discussion?

我認為這種混亂最終源于規范中這一行的模糊性:

where s is the sum of the dash array values.

難道& quot虛線數組值& quot是指用戶在屬性中提供的值？還是指處理后的值數組，奇數長度的數組被重復以產生偶數長度的數組(例如stroke-dash array = & quot；10 & quot變成stroke-dash array = & quot；10 10 & quot).Safari似乎將其解讀為前者，Chrome和Firefox則是后者。

例如，用stroke-dash array = & quot；10 & quot，規范說stroke-dash offset = & quot；-1 & quot；將與stroke-dash offset = & quot；9 & quot根據規范。但是在Chrome和Firefox中，它看起來會和stroke-dash offset = & quot；19 & quot。但是，如果設置stroke-dash array = & quot；10 10 & quot，它的行為似乎如你所愿。

澄清規格

這是我在規范中創建的一個關于負破折號偏移的問題: https://github.com/w3c/svgwg/issues/795

如果你覺得這令人沮喪，給這個問題一些意見或的，也許他們會解決它。

如上所述，負值不適用于筆畫-虛線偏移。如果您將值轉換為正數，這應該可以實現(您也需要轉換初始值):

.path2 {
  stroke-dasharray: 1500;
}

@keyframes dash {
  from {
  stroke-dashoffset: 500;
  }
}

@-webkit-keyframes dash {
  from {
  stroke-dashoffset: 500;
  }
}

我可以通過將stroke-dashoffset設置為stroke-dasharray的雙倍值來獲得想要的結果

第一步:

第二步:

我也有同樣的負面情緒。因此，我使用正值來代替并翻轉SVG。

在我的特殊例子中，我通過使用transform:scaleX(-1)翻轉SVG來解決這個問題。

根據您的需求，翻轉SVG可能有效。

SVG動畫標簽似乎沒有css也能工作

<path stroke-dasharray="500" other attr>
    <animate 
      attributeName="stroke-dashoffset" 
      from="-500" 
      to="500"
      dur="3s" // duration
      begin="2s" // delay
      fill="freeze"/>
  </path>