需要帮助清理 SVG 动画

Posted 2023-02-25

【中文标题】需要帮助清理 SVG 动画

【英文标题】：Need help cleaning up SVG animation

【发布时间】：2021-10-07 14:01:06

【问题描述】：

我为 svg 填充动画创建了一个演示。我的方法：我正在创建原始 svg 的蒙版，然后剪裁该蒙版。然后我在悬停时从下到上为蒙版的剪辑版本设置动画。我的问题是，当动画发生时，svg 元素的底部会闪烁。闪烁位于 svg 的最底部，是一条非常细的线。我尝试在屏幕截图上捕获它，但它没有被拾取。

有人知道我该如何清理它吗？

演示：https://codepen.io/aki-sol/pen/JjJLxYG?editors=1100

html

<svg class="">
  <use xlink:href="#heart"></use>
</svg>

<svg viewBox="0 -28 512.00002 512" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" d="m471.382812 44.578125c-26.503906-28.746094-62.871093-44.578125-102.410156-44.578125-29.554687 0-56.621094 9.34375-80.449218 27.769531-12.023438 9.300781-22.917969 20.679688-32.523438 33.960938-9.601562-13.277344-20.5-24.660157-32.527344-33.960938-23.824218-18.425781-50.890625-27.769531-80.445312-27.769531-39.539063 0-75.910156 15.832031-102.414063 44.578125-26.1875 28.410156-40.613281 67.222656-40.613281 109.292969 0 43.300781 16.136719 82.9375 50.78125 124.742187 30.992188 37.394531 75.535156 75.355469 127.117188 119.3125 17.613281 15.011719 37.578124 32.027344 58.308593 50.152344 5.476563 4.796875 12.503907 7.4375 19.792969 7.4375 7.285156 0 14.316406-2.640625 19.785156-7.429687 20.730469-18.128907 40.707032-35.152344 58.328125-50.171876 51.574219-43.949218 96.117188-81.90625 127.109375-119.304687 34.644532-41.800781 50.777344-81.4375 50.777344-124.742187 0-42.066407-14.425781-80.878907-40.617188-109.289063zm0 0" />
  <mask id="clip2">
    <path fill="white" d="m471.382812 44.578125c-26.503906-28.746094-62.871093-44.578125-102.410156-44.578125-29.554687 0-56.621094 9.34375-80.449218 27.769531-12.023438 9.300781-22.917969 20.679688-32.523438 33.960938-9.601562-13.277344-20.5-24.660157-32.527344-33.960938-23.824218-18.425781-50.890625-27.769531-80.445312-27.769531-39.539063 0-75.910156 15.832031-102.414063 44.578125-26.1875 28.410156-40.613281 67.222656-40.613281 109.292969 0 43.300781 16.136719 82.9375 50.78125 124.742187 30.992188 37.394531 75.535156 75.355469 127.117188 119.3125 17.613281 15.011719 37.578124 32.027344 58.308593 50.152344 5.476563 4.796875 12.503907 7.4375 19.792969 7.4375 7.285156 0 14.316406-2.640625 19.785156-7.429687 20.730469-18.128907 40.707032-35.152344 58.328125-50.171876 51.574219-43.949218 96.117188-81.90625 127.109375-119.304687 34.644532-41.800781 50.777344-81.4375 50.777344-124.742187 0-42.066407-14.425781-80.878907-40.617188-109.289063zm0 0" fill="white" />
  </mask>
  <g mask="url('#clip2')">
    <rect   fill="none">
    </rect>
  </g>
</svg>

CSS：

body 
  background: black;


rect 
  transform: translateY(100%);
  fill: yellow;
  transition: transform 8s ease-in-out;
  will-change: transform;


svg:hover rect 
  transform: translateY(0);


svg path 
  stroke: yellow;


svg 
  width: 300px;


.hide 
  display: none;

【参考方案1】：

您可以为心形剪裁的非常宽的线条的 stroke-dashoffset 设置动画。对于中风，您可以再次使用带有 use 元素的心脏：

body 
  background: black;

#line 
  stroke-dasharray:465;
  stroke-dashoffset:465;
  transition: stroke-dashoffset 2s ease-in-out;


svg:hover #line 
  stroke-dashoffset:0;


svg 
  width: 300px;

<svg viewBox="0 0 512 465" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="clip">
  <path id="heart" fill="none" d="m471.382812 44.578125c-26.503906-28.746094-62.871093-44.578125-102.410156-44.578125-29.554687 0-56.621094 9.34375-80.449218 27.769531-12.023438 9.300781-22.917969 20.679688-32.523438 33.960938-9.601562-13.277344-20.5-24.660157-32.527344-33.960938-23.824218-18.425781-50.890625-27.769531-80.445312-27.769531-39.539063 0-75.910156 15.832031-102.414063 44.578125-26.1875 28.410156-40.613281 67.222656-40.613281 109.292969 0 43.300781 16.136719 82.9375 50.78125 124.742187 30.992188 37.394531 75.535156 75.355469 127.117188 119.3125 17.613281 15.011719 37.578124 32.027344 58.308593 50.152344 5.476563 4.796875 12.503907 7.4375 19.792969 7.4375 7.285156 0 14.316406-2.640625 19.785156-7.429687 20.730469-18.128907 40.707032-35.152344 58.328125-50.171876 51.574219-43.949218 96.117188-81.90625 127.109375-119.304687 34.644532-41.800781 50.777344-81.4375 50.777344-124.742187 0-42.066407-14.425781-80.878907-40.617188-109.289063zm0 0" />
  </clipPath>
  <path id="line" clip-path="url('#clip')" d="M256,465V0" stroke="gold" stroke-/>
  <use xlink:href="#heart" stroke="gold" ></use>
</svg>

【讨论】：

我在我的项目中实现了它，它几乎可以与我的 svg 一起使用（我在我的项目中使用了稍微复杂一点的 svg）。如果我将代码调整为我的 svg，它会被填满一半。我认为这与<path id="line"> 中的d 属性有关。您能否澄清该属性的作用？我试图弄清楚如何调整数字来填充我的 svg。

正如我在回答中提到的那样，路径正在绘制一条非常宽的stroke-width="512" 线。对于更复杂的形状，您可能需要遵循该形状的不同路径。为了更好地了解上面演示中发生的情况，请将stroke-width="512" 更改为 50 或更少。

是的，我理解填充动画的那部分。我正在努力的部分是了解这个路径命令属性d="M256,465V0" 是如何生成的？

您从点 x:256,y;465 即中心底部开始您的路径，然后向点 x:same, y:0 画一条垂直线

谢谢！我花了一段时间才理解它，但现在它是有道理的！我也让它在我的项目中工作。