SVG动画钻石路径“ D＆quot”

发布于 2025-02-09 14:58:35 字数 788 浏览 2 评论 0原文

我想为这条破折号钻石制作动画，但由于它路径D，但我不知道该如何使该工作...我基本上搜索了一些类似的东西。 https://codepen.io/myxotod/pen/myxotod/pen/pen/pen/xxrgdr？ >我在svg 路径d的文章中找到的，但我不知道它是如何工作的……我的问题也很简单。

<svg width="119" height="30" viewBox="0 0 119 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"  d="M119 0V25H10.7735L6 29.7735L0.226501 24L6 18.2265L10.7735 23H117V0H119Z" fill="black"/>
                        </svg>

当它徘徊时，它将从创建钻石到行的边缘 ...然后将其动画起来，除非它会撤离。就是这样。

原文

I wanted to animated this dash line diamond but since it path d and I don't know how to make that work... I basically search some stuff like this one. https://codepen.io/MyXoToD/pen/xxrGdR?editors=1100 that I found in article in svg path d but I don't know how it works...Also my problem is just simple.

<svg width="119" height="30" viewBox="0 0 119 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"  d="M119 0V25H10.7735L6 29.7735L0.226501 24L6 18.2265L10.7735 23H117V0H119Z" fill="black"/>
                        </svg>

When it hovers it will animated from creating the diamond to the edge of line... and then it will stays there unless it unhover. Thats it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我们只是彼此的过ke 2025-02-16 14:58:36

这是你的意思吗？

现有的路径是结合钻石的填充形状。我不得不将钻石分为自己的道路。然后将其余的路径更改为线路。

然后，当您悬停时，我们将动画应用于钻石。它沿线移动到右上角。

svg:hover .diamond {
  animation: move 0.5s ease-in forwards;
}

@keyframes move {
  0% {
    transform: translate(0,0);
  }
  82% {
    transform: translate(112px,0);
  }
  100% {
    transform: translate(112px,-24px);
  }
}

<svg width="119" height="30" viewBox="0 -6 124 36" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- the L-shaped path -->
  <path fill-rule="evenodd" clip-rule="evenodd" d="M 118,0 V 24 H 6" fill="none" stroke="black" stroke-width="2"/>
  <!-- the moving diamond -->
  <path fill-rule="evenodd" clip-rule="evenodd" d="M 11.7735,24 L 6,29.7735 L 0.2265,24 L 6,18.2265 L 11.7735,24Z" fill="black" class="diamond"/>
</svg>

Is this what you mean?

The existing path is a filled shape that incorporates the diamond. I had to separate the diamond out into its own path. Then change the rest of the path to a line.

Then when you hover, we apply an animation to the diamond. It gets moved along the line and up to the top right corner.

svg:hover .diamond {
  animation: move 0.5s ease-in forwards;
}

@keyframes move {
  0% {
    transform: translate(0,0);
  }
  82% {
    transform: translate(112px,0);
  }
  100% {
    transform: translate(112px,-24px);
  }
}

<svg width="119" height="30" viewBox="0 -6 124 36" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- the L-shaped path -->
  <path fill-rule="evenodd" clip-rule="evenodd" d="M 118,0 V 24 H 6" fill="none" stroke="black" stroke-width="2"/>
  <!-- the moving diamond -->
  <path fill-rule="evenodd" clip-rule="evenodd" d="M 11.7735,24 L 6,29.7735 L 0.2265,24 L 6,18.2265 L 11.7735,24Z" fill="black" class="diamond"/>
</svg>

回复收藏 0 原文

~没有更多了~