动画 SVG，圆形笔划悬停 [英] Animated SVG, circle stroke hover

问题描述

希望模仿动画箭头:

调用笔画的最佳方式是什么?

谢谢大家.

解决方案

如果您的目标是现代浏览器，我建议您使用 svg 动画.

您可以使用 stroke-dasharray 动画笔画，该 stroke-dasharray 具有圆的长度 (2 * PI * r) 和等长的短划线偏移.使用您的破折号长度和偏移量的动画值来创建不同的效果.

这是一个如何执行此操作的示例.

.circle:hover {/* 计算使用:(2 * PI * R) */中风-dasharray:227；中风-dashoffset:0；动画迭代次数:无限；动画名称:旋转；动画持续时间:2s；动画方向:交替；动画计时功能:线性；}@关键帧旋转{到 {中风-dashoffset:227；}}

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="00 80 80" xml:space="保留"><polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/><circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2"/><circle class="circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4"/></svg>

使用 css animation 属性和 @keyframes，你可以做各种花哨的东西.如果您希望保持简单，也可以尝试使用 transition 属性，如下例所示.请注意，我使用了 svg transform 属性来更改虚线笔划的起点.

.another-circle {中风-dasharray:227；中风-dashoffset:227；过渡:stroke-dashoffset 2s 线性；}.another-circle:悬停{中风-dashoffset:0；}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="保留"><polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/><circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2"/><circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4"/></svg>

Looking to mimic the animated arrow:

http://uve.info/

On hover the stroke overlays the circle, I have the shape created in Illustrator, thats fine, positioning easy. just animating the stroke.

HTML (Inline SVG):

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
    <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/>
    <path class="arrow offset-colour" d="M40,1c21.5,0,39,17.5,39,39S61.5,79,40,79S1,61.5,1,40S18.5,1,40,1 M40,0C17.9,0,0,17.9,0,40s17.9,40,40,40s40-17.9,40-40S62.1,0,40,0L40,0z"/>
</svg>

The path, is a circle already. I want another path that sits on top of the current path to emulate the uve.info site. This whole animation is done via hover. This is what the arrow should look like mid animation proving a pain.

What would be the best way to invoke the stroke?

Thanks all.

解决方案

If you're targeting somewhat modern browsers, I'd suggest using svg animations.

You can animate strokes by using a stroke-dasharray that has the length of your circle (2 * PI * r) and a dash offset of equal length. Play around with the animation values of your dash length and offset to create different effects.

Here's an example of how to do so.

.circle:hover {
  /* calculate using: (2 * PI * R) */
  stroke-dasharray: 227;
  stroke-dashoffset: 0;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 227;
  }
}

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle class="circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>

Using the css animation property and @keyframes, you can do all kinds of fancy stuff. If you'd rather keep it simple, you could also try using the transition property, like in the example below. Note that I've used the svg transform attribute to change the starting point of the dashed stroke.

.another-circle {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  transition: stroke-dashoffset 2s linear;
}
.another-circle:hover {
  stroke-dashoffset: 0;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>

这篇关于动画 SVG，圆形笔划悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！