时间戳

首页 > 解决方案 > svg 正在反向播放，底部减少

css - svg 正在反向播放，底部减少

问题描述

我很困惑，我搜索了一天但没有成功。我有一个完整的 Vuejs 项目，我尝试 Svg 很简单而且很有趣，但我不明白为什么在播放动画时要调整图像大小。

我的大问题是 svg 的底部调整大小并变小我不知道为什么？ https://codepen.io/deeluxe/pen/VwvdgrN

 <svg class="svg-wave" preserveAspectRatio="none" viewBox="0 0 1440 932">
  <path class="polymorph" d="M485.168 37.924C264.292 -30.76 69.6908 9.30565 0 37.924V932H1442V105.029C1336.46 77.3975 1129.89 162.266 1019.35 160.785C908.815 159.305 761.264 123.779 485.168 37.924Z" fill="url(#paint0_linear)"/>
  <defs>
    <linearGradient id="paint0_linear" x1="775.269" y1="112.006" x2="722.687" y2="680.065" gradientUnits="userSpaceOnUse">
      <stop stop-color="#05CDDA"/>
      <stop offset="1" stop-color="#034E53"/>
    </linearGradient>
  </defs>

如果我尝试一个简单的仪表，我会得到它是反向播放的！

https://codepen.io/deeluxe/pen/mdeKvYe

<svg class="svg-wave" preserveAspectRatio="xMaxYMin  meet" width="240" height="561" viewBox="0 0 240 561" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="polymorph" d="M239.5 0.5H0.5V560.5H239.5V0.5Z" fill="#EC0000"/>
</svg>
anime({
    targets: '.polymorph',
    d: [
      { value: 'M239.5 0H0.5V118.5H239.5V0Z'},
    ],
    easing: 'linear',
    duration: 8000,
    loop: true
  });

我用 Figma 复制 svg。如果有人可以修复两个代码之一，我可能会理解发生了什么：/

谢谢 ！

标签： cssvue.jsanimationsvg

解决方案

如果我理解您的要求，那么第一个示例的问题只是目标路径不是您想要的。

在dvalue 里面有一个部分说V895. 这绘制到点 895。但是您viewBox的高度为 932，因此底部有 37 个像素作为间隙。

将其与具有 的原始路径进行对比，一直V932绘制到底部。

我不完全确定您要做什么或您是如何在这种情况下结束的，但是更改V895为V932目标值d应该可以防止蓝色区域的底部向上蔓延。

我真的不明白你为第二个例子描述了什么问题。如果它正在反向播放，那么您肯定只需要切换两条路径吗？

更新：

首先，我推荐 MDN SVG 指南。这是绘制基本形状的极好介绍：

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

对于您的最新示例，半像素会发生一些奇怪的事情。就其本身而言，使用半像素没有任何问题，但它在开始路径和结束路径之间并不一致。

这是您可以达到预期效果的一种方法。

首先让我们绘制初始矩形。你可以<rect>用来画一个矩形，但我会坚持使用<path>，因为它是你一直在使用的。

首先，我将光标移动到图像的左下角。那就是M0 300。然后我会沿着底部画水平线，H652。然后在右手边，V0。然后沿着顶部，H0。最后，使用 aZ将其加入到开头。请注意，大写字母的坐标都是绝对的，而不是相对的。所以当我写这样的东西时V0，意味着'垂直移动直到 y 为 0'。您可以使用小写字母执行类似的操作，然后数字将相对于当前光标位置。

完成的路径是：

<path class="polymorph" d="M0 300H652V0H0Z" fill="black"/>

您可以插入额外的空格以使其更易于阅读，M0 300 H652 V0 H0 Z.

对于目标路径，它非常相似，只是我们需要更改V0. 我们不希望黑色矩形一直延伸到顶部（顶部为 0）。在您的示例中，矩形的最终高度为 44，因此我将坚持使用它。鉴于我们有 300 的高度，这viewBox意味着我们需要.V256300 - 44

所以这给出了：

{ value: 'M0 300H652V256H0Z'}

为了解决这些问题，我建议关闭动画。而是尝试在静态 HTML 中绘制目标路径。一旦你画出了正确的东西，你就可以继续尝试为它制作动画。

推荐阅读