SVG的<path></path>元素提供了強(qiáng)大的繪圖功能，我偶爾會(huì)嘗試用它來(lái)繪制一些形狀。雖然我對(duì)它的全部功能只了解皮毛，但也足夠讓我嘗試一些有趣的動(dòng)畫(huà)效果。所有直線語(yǔ)法命令（如L）都非常簡(jiǎn)單易懂，而曲線命令Q也相當(dāng)直觀。將繪圖限制在viewBox="0 0 100 100"內(nèi)，繪制簡(jiǎn)單的圖形似乎并不難。

以下是一個(gè)經(jīng)典示例，它使用所有基本命令繪制圖形，并使用CSS進(jìn)行動(dòng)畫(huà)處理（僅限Chromium瀏覽器）：

看似奇怪但卻真實(shí)：

<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");
}

最近，我需要一個(gè)UI元素，其圖標(biāo)會(huì)根據(jù)狀態(tài)的不同而變化。它有點(diǎn)像“日志”形狀，默認(rèn)狀態(tài)是直線，有點(diǎn)像漢堡菜單（只有四條線，更像是文本行），然后是其他各種狀態(tài)。

1. 默認(rèn) (DEFAULT)
2. 活動(dòng) (ACTIVE)
3. 成功 (SUCCESS)
4. 錯(cuò)誤 (ERROR)

首先，我編寫(xiě)了一個(gè)非常復(fù)雜的有限狀態(tài)機(jī)：

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屬性設(shè)置樣式打開(kāi)了大門(mén)：

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

所以，如果我的元素以四條線的默認(rèn)狀態(tài)開(kāi)始：

<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中更改其他狀態(tài)的路徑。例如，我可以使用CSS更改這四條直線。

請(qǐng)注意，這四條“直線”方便地包含了未使用的曲線點(diǎn)。只有具有相同數(shù)量和類型點(diǎn)的路徑才能在CSS中進(jìn)行動(dòng)畫(huà)處理。添加曲線點(diǎn)打開(kāi)了更多可能性。

這四個(gè)新的路徑實(shí)際上繪制的是類似圓形的形狀！

.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");
      }
    }
  }
}

對(duì)于其他狀態(tài)，我繪制了一個(gè)粗略的勾號(hào)（表示成功）和一個(gè)粗略的感嘆號(hào)（表示失?。?。

演示（僅限Chromium瀏覽器），您可以點(diǎn)擊它來(lái)更改狀態(tài)：（此處應(yīng)插入演示鏈接或代碼，但由于我無(wú)法創(chuàng)建動(dòng)態(tài)內(nèi)容，只能描述）

由于Firefox和Safari不支持CSS中的d: path()，所以我最終沒(méi)有使用它。它并非不能進(jìn)行動(dòng)畫(huà)處理，而是根本無(wú)法工作，因此對(duì)我來(lái)說(shuō)不可用。我最終只是在不同的狀態(tài)下替換了圖標(biāo)。

如果您需要跨瀏覽器的形狀變形，我們有一篇關(guān)于這方面的完整文章。（此處應(yīng)插入文章鏈接，但由于我無(wú)法提供鏈接，只能描述）

以上是Animate SVG路徑在CSS中的變化的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！