為兩個SVG屬性設定影片時，Css影片有奇怪的延遲-有解無憂

正如標題所說，當我嘗試同時為 stroke-dashoffset 設定影片和填充時。它有這個奇怪的不需要的 3 秒延遲，但我有兩個影片屬性都在一個關鍵幀中，如下所示

svg {
  background-color: black;
  stroke-dasharray: 1800;
  fill: #fff;
  stroke: #fff;
  opacity: 10;
  animation: reveal 10s cubic-bezier(0, 0.23, 1, 0.1);
  animation-delay: 0;
  max-width: min(calc(100vw - 10rem), 40rem);
}
@keyframes reveal {
  0% {
    fill: none;
    stroke-dashoffset: 1800;
  }
  80% {
    fill: rgba(255, 255, 255, 0);
  }
  100% {
    fill: rgba(255, 255, 255, 1);
    stroke-dashoffset: 0;
  }
}

<svg
      id="Layer_1"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 314.41 79.8"
    >
      <defs>
        <style>
          .cls-1 {
            font-size: 76px;
            font-family: BebasNeue-Regular, Bebas Neue;
          }
          .cls-2 {
            letter-spacing: 0em;
          }
          .cls-3 {
            letter-spacing: 0em;
          }
        </style>
      </defs>
      <text class="cls-1" transform="translate(0 64.6)">
        Hel
        <tspan class="cls-2" x="85.65" y="0">l</tspan>
        <tspan class="cls-3" x="111.49" y="0">o World</tspan>
      </text>
    </svg>

我嘗試通過訪問以下 URL 進行研究：

同時播放多個 CSS 影片
CSS 3 奇怪的影片延遲

但是，我仍然沒有任何想法來解決我的問題，右邊是我在 jsfiddle 上的代碼 https://jsfiddle.net/ju781mb9/

PS。該視頻僅用于占位符，因此您對網站有所了解，并且我還減慢了影片速度

uj5u.com熱心網友回復：

按照您撰寫@keyframes規則的方式，您似乎希望 stroke-dashoffset 從影片持續時間的開頭開始，并在其結尾結束。但事實上，您完全無法控制代碼的結構方式。您撰寫stroke-dasharray: 1800并假設 1800px 是總筆劃長度。

文本中字形的筆畫長度是每個單獨字形的輪廓長度。每個字形都有不同的筆畫長度。
如果字形由多個子路徑組成，例如字母“o”由外線和內線組成，則為每個子路徑單獨定義筆劃破折號。然后，您可以在一個組合筆畫中擁有多個影片長度。
您提供了一個非標準的font-family，但不包括網路字體源。這意味著沒有偶然安裝您假設的確切字體的每個人都會看到具有不同筆畫長度的不同替換字體的文本。
您定義一個備用字體。兩種字體都有不同的筆畫長度。

只有一種方法可以擺脫這種困境并獲得對筆畫長度和后續影片時間的控制：使用矢量圖形編輯器將文本轉換為路徑。（您似乎使用的 Adob??e Illustrator 可以做到這一點。）請記住設定一個aria-label屬性以使用它最初表示的文本來注釋封閉<g>元素。

SVG<path>元素有一個pathLength屬性，您可以簡單地用虛構的筆畫覆寫測量的筆畫長度。如果您隨后將該值用于您的stroke-dasharray屬性，則影片將像使用正確的筆畫長度一樣運行。以下代碼將沿路徑長度的一半顯示筆劃：

    <path style="stroke-dasharray:100;stroke-dashoffset:-50" 
          pathLength="100" 
          d="M 125.2,25.3 H 131.7 V 80 H 125.2 Z" />

注意的負數stroke-dashoffset。（我將在這里描述復雜的原因，他們可能會填滿整個教程。）

svg {
  background-color:black;
}

.label path {
  fill: white;
  stroke: white;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: reveal 10s cubic-bezier(0, 0.23, 1, 0.1);
}

@keyframes reveal {
  0% {
    fill: none;
    stroke-dashoffset: -100;
  }
  80% {
    fill: rgba(255, 255, 255, 0);
  }
  100% {
    fill: rgba(255, 255, 255, 1);
    stroke-dashoffset: 0;
  }
}

<svg viewBox="0 0 450 100">
  <g class="label" aria-label="Hello World" style="fill:none;stroke:#ffffff">
    <path pathLength="100" d="M 27.07,27.51 H 34.17 V 49.03 H 59.97 V 27.51 H 67.07 V 80 H 59.97 V 55 H 34.17 V 80 H 27.07 Z" />
    <path pathLength="100" d="M 114.6,58.7 V 61.86 H 84.86 Q 85.29,68.54 88.87,72.05 92.49,75.54 98.93,75.54 102.7,75.54 106.1,74.62 109.6,73.71 113.1,71.88 V 78 Q 109.6,79.47 106,80.25 102.3,81.02 98.54,81.02 89.12,81.02 83.6,75.54 78.11,70.05 78.11,60.7 78.11,51.03 83.32,45.37 88.55,39.68 97.41,39.68 105.4,39.68 110,44.81 114.6,49.91 114.6,58.7 Z M 108.1,56.8 Q 108.1,51.49 105.1,48.32 102.3,45.16 97.48,45.16 92.07,45.16 88.8,48.22 85.57,51.28 85.07,56.83 Z" />
    <path pathLength="100" d="M 125.2,25.3 H 131.7 V 80 H 125.2 Z" />
    <path pathLength="100" d="M 145.2,25.3 H 151.7 V 80 H 145.2 Z" />
    <path pathLength="100" d="M 180.4,45.16 Q 175.2,45.16 172.2,49.24 169.2,53.28 169.2,60.35 169.2,67.41 172.2,71.49 175.2,75.54 180.4,75.54 185.6,75.54 188.6,71.46 191.6,67.38 191.6,60.35 191.6,53.35 188.6,49.27 185.6,45.16 180.4,45.16 Z M 180.4,39.68 Q 188.9,39.68 193.7,45.16 198.5,50.64 198.5,60.35 198.5,70.02 193.7,75.54 188.9,81.02 180.4,81.02 171.9,81.02 167.1,75.54 162.3,70.02 162.3,60.35 162.3,50.64 167.1,45.16 171.9,39.68 180.4,39.68 Z" />
    <path pathLength="100" d="M 227.7,27.51 H 234.9 L 245.9,71.88 256.9,27.51 H 264.9 L 275.9,71.88 286.9,27.51 H 294.1 L 281,80 H 272 L 261,34.44 249.8,80 H 240.9 Z" />
    <path pathLength="100" d="M 314.3,45.16 Q 309.1,45.16 306.1,49.24 303,53.28 303,60.35 303,67.41 306,71.49 309.1,75.54 314.3,75.54 319.5,75.54 322.5,71.46 325.5,67.38 325.5,60.35 325.5,53.35 322.5,49.27 319.5,45.16 314.3,45.16 Z M 314.3,39.68 Q 322.7,39.68 327.5,45.16 332.4,50.64 332.4,60.35 332.4,70.02 327.5,75.54 322.7,81.02 314.3,81.02 305.8,81.02 301,75.54 296.2,70.02 296.2,60.35 296.2,50.64 301,45.16 305.8,39.68 314.3,39.68 Z" />
    <path pathLength="100" d="M 365.9,46.67 Q 364.8,46.04 363.5,45.76 362.2,45.44 360.7,45.44 355.2,45.44 352.2,49.03 349.3,52.58 349.3,59.26 V 80 H 342.8 V 40.63 H 349.3 V 46.74 Q 351.3,43.16 354.6,41.43 357.9,39.68 362.6,39.68 363.2,39.68 364,39.78 364.8,39.85 365.8,40.03 Z" />
    <path pathLength="100" d="M 372.7,25.3 H 379.2 V 80 H 372.7 Z" />
    <path pathLength="100" d="M 418.6,46.6 V 25.3 H 425.1 V 80 H 418.6 V 74.09 Q 416.6,77.61 413.4,79.33 410.3,81.02 406,81.02 398.8,81.02 394.3,75.32 389.9,69.63 389.9,60.35 389.9,51.07 394.3,45.37 398.8,39.68 406,39.68 410.3,39.68 413.4,41.4 416.6,43.09 418.6,46.6 Z M 396.6,60.35 Q 396.6,67.48 399.5,71.56 402.4,75.61 407.6,75.61 412.7,75.61 415.6,71.56 418.6,67.48 418.6,60.35 418.6,53.21 415.6,49.17 412.7,45.09 407.6,45.09 402.4,45.09 399.5,49.17 396.6,53.21 396.6,60.35 Z" />
  </g>
</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/453189.html

標籤：javascript html css 动画 svg

上一篇：ReactNativeAnimated在第一次點擊時不起作用

下一篇：GLTF-在影片期間應該如何變換關節