Animate SVG路徑在CSS中的變化

SVG的<path></path>元素提供了強大的繪圖功能，我偶爾會嘗試用它來繪製一些形狀。雖然我對它的全部功能只了解皮毛，但也足夠讓我嘗試一些有趣的動畫效果。所有直線語法命令（如L ）都非常簡單易懂，而曲線命令Q也相當直觀。將繪圖限制在viewBox="0 0 100 100"內，繪製簡單的圖形似乎並不難。

以下是一個經典示例，它使用所有基本命令繪製圖形，並使用CSS進行動畫處理（僅限Chromium瀏覽器）：

看似奇怪但卻真實：

<svg viewbox="0 0 10 10"><path d="M2,2 L8,8"></path></svg>

 svg:hover path {
  transition: 0.2s;
  d: path("M8,2 L2,8");
}

最近，我需要一個UI元素，其圖標會根據狀態的不同而變化。它有點像“日誌”形狀，默認狀態是直線，有點像漢堡菜單（只有四條線，更像是文本行），然後是其他各種狀態。

1. 默認(DEFAULT)
2. 活動(ACTIVE)
3. 成功(SUCCESS)
4. 錯誤(ERROR)

首先，我編寫了一個非常複雜的有限狀態機：

 const indicator = document.querySelector(".element");

let currentState = indicator.dataset.state;

indicator.addEventListener("click", () => {
  let nextState = "";

  if (currentState == "DEFAULT") {
    nextState = "ACTIVE";
  } else if (currentState == "ACTIVE") {
    nextState = "SUCCESS";
  } else if (currentState == "SUCCESS") {
    nextState = "ERROR";
  } else {
    nextState = "DEFAULT";
  }

  indicator.dataset.state = nextState;
  currentState = nextState;
});

這為使用data屬性設置樣式打開了大門：

 .element {
  &[data-state="DEFAULT"] {
  }
  &[data-state="ACTIVE"] {
  }
  &[data-state="SUCCESS"] {
  }
  &[data-state="ERROR"] {
  }
}

所以，如果我的元素以四條線的默認狀態開始：

<div data-state="DEFAULT">
  <svg viewbox="0 0 100 100"><path d="M0, 20 Q50, 20 100, 20"></path><path d="M0, 40 Q50, 40 100, 40"></path><path d="M0, 60 Q50, 60 100, 60"></path><path d="M0, 80 Q50, 80 100, 80"></path></svg>
</div>

……我可以在CSS中更改其他狀態的路徑。例如，我可以使用CSS更改這四條直線。

請注意，這四條“直線”方便地包含了未使用的曲線點。只有具有相同數量和類型點的路徑才能在CSS中進行動畫處理。添加曲線點打開了更多可能性。

這四個新的路徑實際上繪製的是類似圓形的形狀！

 .editor-indicator {
  &[data-state="ACTIVE"] {
    .icon {
      :nth-child(1) {
        d: path("M50, 0 Q95, 5 100,50");
      }
      :nth-child(2) {
        d: path("M100, 50 Q95, 95 50,100");
      }
      :nth-child(3) {
        d: path("M50,100 Q5, 95 0, 50");
      }
      :nth-child(4) {
        d: path("M0, 50 Q5, 5 50, 0");
      }
    }
  }
}

對於其他狀態，我繪製了一個粗略的勾號（表示成功）和一個粗略的感嘆號（表示失敗）。

演示（僅限Chromium瀏覽器），您可以點擊它來更改狀態：（此處應插入演示鏈接或代碼，但由於我無法創建動態內容，只能描述）

由於Firefox和Safari不支持CSS中的d: path() ，所以我最終沒有使用它。它並非不能進行動畫處理，而是根本無法工作，因此對我來說不可用。我最終只是在不同的狀態下替換了圖標。

如果您需要跨瀏覽器的形狀變形，我們有一篇關於這方面的完整文章。 （此處應插入文章鏈接，但由於我無法提供鏈接，只能描述）

以上是Animate SVG路徑在CSS中的變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！