這是在 CSS 中獲取 32 位 API 響應數據的直接后續(xù)內容

在 CSS 中，將 16 位響應數據放置在固有寬度和固有高度中，與根本無法獲取 API 響應數據（沒有 JavaScript）相比，這是一個巨大的改進...

然而，在我弄清楚這一點后的幾天里，我的想法偏向一個方向：
如果是 16 位的話會更有趣32 次而不是僅僅兩次。

將 512 位打包到 SVG 中以進行滲透

我在睡前冥想，突然想到了另一個靈感 -

“如果圖像文檔本身可以為其自己內在大小設置動畫怎么辦？”

在靈感迸發(fā)的想法之后，通常會出現(xiàn)一系列的實現(xiàn)，每一個都閃現(xiàn)出對如何實現(xiàn)它的理解......我只需要弄清楚這樣的圖像類型是否存在。

我抓起手機，搜索了我所知道的所有動畫圖像格式，看看它們是否有能力。 svg、webp、apng、gif、也許是奇怪的視頻格式？我沒找到。

早上，我內心的某個聲音告訴我繼續(xù)挖掘 SVG。

我嘗試過嵌入 CSS、媒體查詢、使用定義、更多使用定義、深入研究眾多 SVG 動畫文檔、試圖欺騙它們，并閱讀其他想法和動畫相關屬性 - 沒有什么可以讓我設置高度或寬度。

但是最后一個鏈接讓我想到......

...viewBox 怎么樣？我還有其他一些障礙需要解決，但是......那個可以制作動畫嗎？

vvv
就是這樣??！
^^^

整理解空間

現(xiàn)在的問題是，如果你沒有在根 svg 元素上設置寬度和高度屬性，然后嘗試使用 svg 作為偽元素的內容，它會呈現(xiàn) 0px x 0px，因為它是一個矢量文檔，不再有內在尺寸。

所以我搜索并向其中添加了preserveAspectRatio...仍然是0x0...但是然后在我的CSS中，我將寬度固定為10px，并讓viewBox保留的寬高比決定高度（我可以用嵌入 SVG 中的動畫）aaand...包含它的 html 元素增長到預期高度。

:3

如果只有一幀，這會將我原來的 32 位切成兩半；因為只有一個維度可以被滲透，而另一個維度是靜態(tài)的。

但是！現(xiàn)在，我的第二個維度是時間，第一個維度受時間支配，所以有足夠的數據可供使用。

多么令人興奮！

我學習了所有關于如何控制 SVG 中的動畫的知識，并編寫了一個服務器端腳本來生成我的第一個動畫 SVG：

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

（為什么是 php？！ - 因為我已經有了一臺我已經支付多年費用的服務器，設置為運行 php......盡管我已經通過了解 JavaScript 和 Node 過著美好的生活真的很好，有時查找每個函數、運算符和語法以完成您知道可以在不知道具體細節(jié)的情況下可以做的事情是很有趣的。哈哈）

現(xiàn)在讓我們從上一篇文章中分叉我的第一個 % CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位，以查看 CSS 隨著 SVG 的變化而響應和改變大小 --vars：

確認！我們可以讀取尺寸變化。就像上一篇文章一樣，最終，它將使用視圖時間軸測量技術而不是 tan(atan2()) 技術。

它會耗盡我的 CPU，因此我們希望在滲漏完成后將其從內容中刪除。

從概念上講，如何在程序上滲透一維時間

上面的演示本身并不是很有用。只要它存在，它就會報告高度的副本，但我們需要保存它......如果您不知道并且不能信任該順序，那么一堆 16 位值有什么用呢？

我知道我可以使用 CPU Hack 累積 CSS 中的值，并以數學方式確定哪個 --var 更新傳入的值，而不是僅僅保留其先前的值，因此我不會專門擔心 CSS。一般來說，我們如何隨著時間的推移滲透一維？

哨兵值來救援！

即使我想將數據包本身限制為 16 位，我們使用的測量區(qū)域的大小也不必限制為 16 位。所以我們也可以在那里裝一些哨兵。 css-api-fetch 能夠處理高達 99999 的值，遠高于 65535（16 位上限）。

那么我們需要知道什么？

我們可能會遇到什么問題？

如果數據中的兩個值連續(xù)相同，我們需要中斷才能知道這是兩個不同的數據包。我已經決定我們的目標是 512 位，因此我們需要 SVG 動畫最多有 32 個 16 位數據幀，中間有哨兵幀...

如果 CPU 感覺很重，SVG 動畫可能會完全跳過離散步驟。這意味著我們需要某種方式來始終知道我們正在進行哪一步。因此，我們不是使用單個“數據幀之間”哨兵，而是使用數據索引（像 CSS nth-* 選擇器一樣基于 1）作為哨兵值，使其成為顯示該索引數據的離散步驟之前的自己的離散步驟。

哨兵指數->數據->哨兵指數->數據...

這讓我們知道它何時循環(huán)，可能是當我們到達哨兵 1 時。

但是我們怎么知道它沒有跳到不同的數據框并且不小心讓我們將它記錄在錯誤的槽中？

我們需要讓它循環(huán)并繼續(xù)直到正確，而了解數據是否正確的最好方法是校驗和！所以我們需要另一個數據框，以及該值的哨兵。

創(chuàng)建校驗和算法

我可以使用 css-bin-bits 來異或所有數據，但它相當繁重并且在其他任何地方都不需要 - 讓我們選擇一個在 CSS 中很容易實現(xiàn)的替代方案。

從數學上講，如果您采用 16 位值，將其除以 256（底數到整數），然后再次采用 16 位值除以 256，您將得到高字節(jié)和低字節(jié)。將這 8 位值加在一起，就得到了 9 位。這感覺像是一個合理的校驗和方法，但讓我們回到這一點。

只要 最終校驗和是 16 位，我們就不必保持在 16 位范圍內來計算校驗和，所以讓我們將所有（最多）相加32 個值。

我們必須小心由于跳幀而導致的錯誤存儲寫入，所以讓我們添加偶數索引值兩次，這樣就有一些相似的順序。

16 位值的總和，32 次，再加上額外的 16 次，大約為 22 位。將每一側的 11 位除以模，回到之前的想法，然后將它們加在一起，得到 12 位作為我們的校驗和響應。

似乎是合理的...它并不完全防錯，但 SVG 必須跳過幾個步驟來搞亂它，以便現(xiàn)在可能生成相同的校驗和...無論如何，讓我們也發(fā)回數據長度并也將其包含在校驗和中，只需將其添加為校驗和的最后一步即可。最大數據長度（我們想要處理的 16 位值的數量）僅為 32，因此將長度值添加到 12 位并不會讓我們超過 16 位。耶！

_{劇透：這是我所做的，但 CSS 在 21 位左右的某個地方變得有損，所以我將其分割并有效地執(zhí)行相同的算法，但一次分成較小的塊。服務器端完全按照描述使用 alg。}

從技術上講，根據我們描述的設置，動畫中的順序并不重要，只要每個哨兵告訴您下一幀應該在數據。

還有一件事，讓我們將數據長度值放在響應中的第一位，并為其添加一個哨兵（SVG 動畫中的哨兵位于該值之前，與其余數據一樣）。

這是34 個哨兵。 SVG viewBox 高度不能為 0，CSS 將受益于允許 0 在內部表示沒有數據，所以假設我們有 35 個哨兵，其中 0 故意未使用。

所有數據框現(xiàn)在都嵌入到 SVG 中，并在其值上添加 35 。長度和校驗和數據值也將 35 添加到視圖框值中。 SVG 動畫中代表哨兵的 viewBox 高度的值將是 0 到 34（跳過 0），每個值都準確地告訴我們 SVG 動畫中的下一幀代表什么。

原始測量值是否大于 34，它是數據，因此從中減去 35，如果它小于 35，它是哨兵。

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

完全它的實現(xiàn)方式。

我在那里設置了雞抓痕中指示的 4 個 html 元素，然后在 CSS 面板中填充了與它們對應的 4 個空類選擇器周圍的注釋。它現(xiàn)在不會在 :root 上，但我們可以在里面放置任何依賴它的東西。

在從紙上復制筆記并在 % CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位 中以更具體的細節(jié)編寫注釋之前，沒有添加任何功能。

完成后，我只是閱讀筆記并開始實施他們所說的，一直到最終的工作結果。

（我寫了“20”而不是“35”，因為我要使用 256 位進行測試）

我將深入探討它是如何工作的。由于視圖時間軸和時間軸范圍，如果您可以想象表面動畫并被吸進“洞”，回到狹窄的頂部，然后再向下流動，則可以將數據設置為以克萊因瓶形狀流入再次越過表面，通過 dom 層獲得大小和復雜性，然后通過黑洞循環(huán)回到更高的意識 (:root)。

主要是垂直循環(huán)（而不是主要是水平循環(huán)或靜態(tài)循環(huán)）

使用 CSS 竊取 512 位

我們稍微調整并使其更加清晰的注釋：

256 測試 ->第512章 決賽

我在里面添加了一個演示節(jié)點，這很棒，因為我也可以在算法執(zhí)行時顯示內部結構。

但這是最后的注釋，沒有所有的實現(xiàn)和演示噪音。這準確地描述了它是如何工作的。

對于一篇文章來說，在外部嵌入這么多細節(jié)可能不太好，但我將分解每個塊來展示如何它是如何實現(xiàn)的。

主控制器

此結構的頂部是 4 個時間軸值及其動畫。所以讓我們把它們放進去。

這實現(xiàn)的數據流的關鍵部分是它使我們能夠將嵌套在 DOM 深處的數據提升回主機（時間線范圍）。它效率不高，因此我們希望限制執(zhí)行此操作的頻率。每個注冊的屬性及其動畫都可以垂直托管單個數據。數據的值由結構深處某個元素的內聯(lián)或塊視圖位置決定 - 我們稍后會討論該部分。

（請參閱上面之前嵌入的循環(huán)示例，以更清晰地了解數據流）

我們在這里提取的四條數據是：

--xfl-cpu-phase - 這是一個 0 到 4 之間的數值，表示當前正在執(zhí)行 CPU Hack 的哪個階段。 （CPU Hack 的單個“幀”是 4 到 5 個 CSS 渲染幀，階段的一個循環(huán)“勾選”CPU Hack）我將在本文后面更具體地演示這一點。

--xfl-raw-data - 無論 SVG 處于其動畫周期中，它都托管 SVG 的高度。我們的原始數據。如前所述，如果該值小于 35，則 SVG 動畫的這個離散步驟是哨兵值。如果它大于 34，則 SVG 動畫的這個離散步驟就是我們的 16 位值 35，它對應于前面的哨兵指示的值。

--xfl-data-type - 這是最新的哨兵值。在遇到下一個標記之前，該值不會更改。從設置 --xfl-raw-data 到設置此值有 1 個 CSS 幀延遲。

--xfl-data-value - 這是從原始值中減去 35 后的當前數據值，如果我們尚未達到序列的這一步，則為 0。從設置 --xfl-data-type 到設置此值有 1 CSS 幀延遲。

我還預先將 svg-animation-current-state-reporter 包裝在一個僅具有功能的條件下，并且僅在該過程不完整時加載動畫 SVG。 （因此，當我們完成時，所有內部結構都會從內存中刪除，并且重型動畫 svg 也會從渲染中刪除）

關鍵幀值從該數據的最大值變?yōu)?0。稍后我將解釋為什么這些值是向后的 - 查找 Uno Reverse 卡的圖像。

CPU 提取器

接下來我們設置 CPU Hack 的基本樣板

CPU Hack 樣板只是遵循變量名稱模式來設置捕獲和提升動畫。

如果我們有 1 個整數 --xfl\1 我們想要水平循環(huán)（隨著時間的推移），我們注冊它并設置捕獲和提升動畫，如下所示：

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

然后完成對托管兩個CPU動畫的.cpu-exfiltrator元素的循環(huán)分配。我現(xiàn)在只針對其中一個值執(zhí)行此操作：

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

在 Chrome 中，除非兩個動畫同時運行，否則它們不會靜態(tài)循環(huán)（成為初始值）。這可能是暫停動畫設置數字屬性的優(yōu)化的一個奇妙的副作用。

最后，由于我們使用的是 CPU Hack 的新自動版本（您不必像原始 hack 中那樣通過 :hover 來循環(huán)階段），因此我們連接 --xfl-cpu-phase var來自之前的（托管在此處的父元素上，因此我們可以使用樣式查詢來響應它）并控制動畫的播放狀態(tài)。

我們還輸出 --cpu-next-phase ，稍后將其提升回頂部，并使用其視圖位置和時間線范圍為 --xfl-cpu-phase 設置下一個值。

我添加了一個額外的階段來保持 CPU Hack 暫停，直到 SVG 動畫測量成功鎖定下一個 --xfl-data-type

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

（就像現(xiàn)在一樣，數據類型仍然始終為 0，因此一旦連接了下一階段，這將已經在循環(huán) CPU Hack。一旦我們有了數據類型哨兵，它就不會循環(huán)，直到我們完成故意用0哨兵清除它）

稍后，我們還將添加上述條件，以防止 CPU 階段 1 在數據全部到位之前啟動。這將確保在鎖定數據類型（哨兵）和鎖定數據值（原始 - 35）之間，我們希望將 CPU Hack 留在捕獲階段。因此，正如亞伯拉罕·?？怂?(Abraham Hicks) 所說，它“已經做好準備”。

我將繼續(xù)注冊我們期望 SVG 動畫報告的所有 32 個值以及校驗和和長度。

由于 --xfl\1 到 --xfl\32 的注冊是一個大塊，并且 CPU 動畫也只是樣板，因此我將把所有這些移動到 hack 設置的底部，以便以后忽略。

自動CPU破解

這會將下一個 cpu 階段連接到 --xfl-cpu-phase 值

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

這里有一些 CSS 樣板，可以使元素成為滾動容器并將其移出屏幕。重要的部分是：

視圖時間線：--xfl-cpu-phase inline;

它表示這個偽元素的右邊緣落在其 100px 寬的父元素中的位置，將其作為從左側到我們從 0 移動到 4 的動畫的“進度”連接起來......所以 25px 是完成的 25%，當 25% 在 0 到 4 之間時映射為 1。

_{圖像源自谷歌搜索并指向 Twitter}

從技術上講，動畫是 4 比 0，并且從技術上講，當視圖向右移動時，它是從偽的右邊緣開始測量的。因此，25px 寬的偽值距離其 100px 寬的滾動父級右側為 75%，當 75% 介于 4 和 0 之間時，映射到值 1。

如果你不認知地處理反向逆向數學，只是接受最終結果是一個簡單的進度 0 到 4，那么會更容易理解，因為動畫中的最大值是 4（再次忽略動畫 開始 4)。

我們還要編寫就緒狀態(tài)，將 CPU 保持在階段 0，直到數據準備好。注釋位于我們演示的第 64 行：

數據準備好 = 數據類型 > 0 && 原始幀數據 - 35 === 數據值

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

等等，CSS 中的 === ？

這些現(xiàn)在已經非常過時了，今天我會以不同的方式做它們，在clamp()成為基線之前編寫，但是當我需要它們時，我總是打開這個舊的codepen來無意識地復制粘貼數字比較器。更新這些并解釋它們將是一篇很好的文章，但同時您可以閱讀：https://codepen.io/propjockey/pen/YzZMNaz

讀取 SVG 動畫

這最初非常類似于 CPU Exfiltrator 部分，因為它是相同的技術，測量數據并將數據從 DOM 向上移動到其托管位置（范圍）。

我們將測量并報告我們最初設置的基本元素的最后 3 個值。

在 ::before 之前，我們將渲染 SVG 并使用塊視圖位置設置 --xfl-raw-data，該位置是動畫 SVG 高度的測量值。 （記住，我們將寬度固定為 10px）

在 ::after 上，我們將設置 --xfl-data-type 內聯(lián)（標記值 0 到 34）和 --xfl-data-value 塊（16 位值）。

父級需要足夠寬才能渲染 SVG（至少 10 像素）并準確提供哨兵值的測量值（0 到 34）。

父級還需要足夠高才能測量 16 位值 ( 35)。由于我們在第一步中設置了 100k 的最大值，因此即使它比我們需要的大 30% 左右，我們也只會使用它。

并將其移出屏幕到頂部和左側，這樣就不會導致滾動條。

因此，

.svg-animation-current-state-reporter

得到

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

之前變成

@keyframes capture {
  0%, 100% {
    --xfl\1-captured: var(--xfl\1);
  }
}

@keyframes hoist {
  0%, 100% {
    --xfl\1-hoist: var(--xfl\1-captured, 0);
  }
}

和::獲取后

  --xfl\1: calc(
    var(--xfl\1-hoist, 0) + 1
  );

本質上，這些后值的存儲介質是 1px 正方形偽相對于其父滾動容器的視圖位置。我們在左側和頂部的計算中減去 1px，因為偽值本身是 1x1，我們希望它在對應值為 0 時報告 0。

這與之前所做的非常相似。

我們如何計算這些值應該有幾個復雜之處，如注釋所示：

  @container style(--xfl-cpu-phase: 4) {
    animation-play-state: paused, paused;
    --cpu-next-phase: calc(
      min(1, var(--xfl-data-type)) * 4
    );
  }

理解如何解決這個問題的關鍵是任何比較器值都設置為 0 或 1。如果為真則為 1，如果為假則為 0。然后將其乘以某個值。如果為 false，則結果保持為 0，否則變?yōu)槿魏沃怠?/p>

Ana Tudor 在這里深入探討了這個想法的運作方式

然后，如果我們進行兩次比較，對第二個值進行不同或相反的比較，并將它們相加（確保最多一個比較器為 1），那么其中兩個相加只是說“else如果”。

如果沒有準備好 * 使用舊值，否則
如果準備好了 * 使用這個新值

這就是我們在報告類型后在 SVG 動畫離散步驟的持續(xù)時間內保持哨兵值的方式。

實現(xiàn)它的 CSS 代碼從第 191 行開始，就在我們放在底部的 --xfl\... 屬性注冊的大塊上方
@property --xfl\1 { 語法：“”;初始值：0；繼承：真實； }
...
并且它包含附加注釋：

設置特定的 CSS --var 值（尋址分配）

我們剛剛接觸的邏輯與我們用于所有 --xfl\1, 2, 32 值的概念完全相同。

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

您讀取 --xfl-set\1 就好像 --xfl-data-type 等于 1 使用 --xfl-data-is-ready 并隱含 else 0

--xfl-data-is-ready 是早些時候建立的，作為將我們保持在第 0 階段的標志，直到需要翻轉到第 1 階段。

這意味著我們的條件是 && 邏輯。兩個標志都必須為 1 才能通過。

然后你繼續(xù)讀取 --xfl\1 就好像 --xfl-set\1 使用 --xfl-data-value （當前的 SVG 動畫值），否則如果不是 --xfl-set\1 使用 -- xfl\1-hoist（CPU hack 為 --xfl1 保留的先前值）

這是高度重復的內容，幾乎描述了此次滲透的其余全部內容。

最后的步驟是運行基本的 calc() 和 mod() 數學來構建前面所述的校驗和，然后將計算出的校驗和 === 嵌入到 SVG 動畫中的校驗和添加到 CPU Hack 中，以便我們知道它何時完全的。一切都一樣。

所以現(xiàn)在是時候了。 :)

演示：CSS 動畫 SVG 滲透黑客

因為我想向這個黑客的每一個部分展示每個元素一個值，所以這個演示非常繁重。超過 2000 行 HTML 和超過 400 行 CSS。另外，我使用 css-bin-bits 將每個寄存器轉換為二進制等

（點擊 codepen 框架右下角的重新運行即可實時查看它發(fā)生的情況?。?/p>

沒有 JavaScript！

打開聯(lián)系方式？

如果您認為這很簡潔并希望了解更多信息，請聯(lián)系我們！總是很樂意回答問題。

% CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位	% CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位	DEV Blog	% CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位	% CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位

?@JaneOri.% CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位

？@Jane0ri

以上是% CSS：獲取并竊取嵌入動畫 SVG 中的服務器生成數據位的詳細內容。更多信息請關注PHP中文網其他相關文章！