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中文网其他相关文章！