CSS 动画：拉伸和压缩圆弧

Question

我需要创建一个动画效果，其中弧线在脉动 - 在 180 度和 102 度的长度之间交替。还需要同时在两侧对称elongate/compress。我有这个弧线的 svg (src):

<svg width="138px" height="138px" viewBox="0 0 138 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>blue-beam</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <radialGradient cx="50%" cy="4.72722907%" fx="50%" fy="4.72722907%" r="45.2727709%" id="radialGradient-1">
            <stop stop-color="#09FEFE" offset="0%"></stop>
            <stop stop-color="#3DFBFE" stop-opacity="0" offset="100%"></stop>
        </radialGradient>
        <path d="M69,0 L69,0 C107.107648,-7.00026132e-15 138,30.8923523 138,69 L138,69 C138,107.107648 107.107648,138 69,138 L69,138 C30.8923523,138 4.66684088e-15,107.107648 0,69 L0,69 C-4.66684088e-15,30.8923523 30.8923523,7.00026132e-15 69,0 Z" id="path-2"></path>
    </defs>
    <g id="blue-beam" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-3" fill="white">
            <use xlink:href="#path-2"></use>
        </mask>
        <path stroke="url(#radialGradient-1)" stroke-width="4" d="M69,2 C31.9969218,2 2,31.9969218 2,69 C2,106.003078 31.9969218,136 69,136 C106.003078,136 136,106.003078 136,69 C136,31.9969218 106.003078,2 69,2 Z"></path>
    </g>
</svg>

CSS动画新手在此。任何人都可以帮助如何使用 CSS 制作这个动画吗？我坚持如何从两侧实际更改弧本身的长度 (elongate/shorten)。我读到了笔划偏移，但这似乎在一端画出了路径

Answer 1

可以通过多种方式理解 "pulse"。我会选择一个简单的。（就写下来而言）

圆弧的笔触具有 "fading" 效果，通过改变不透明度值的径向渐变实现。如果您更改渐变延伸的半径，您似乎可以看到更长或更短的笔触，直到它逐渐变为透明。你不会得到精确的长度，但它可能或多或少对你有用。

缺点来了：CSS gradient functions, that you could animate with CSS, do not work for SVG strokes. You need the SVG <radialGradient> element, and you need to animate its r attribute. That is a XML attribute, so not animatable with CSS, but only with a SMIL animation. Those are not implemented for Edge/IE, but at least there are Javascript-based polyfills like fakesmile。

（理论上，SVG 2 将 gradientTransform 定义为可以通过 transform 函数使用 CSS 进行动画处理的表示属性，但实际上，这尚未由浏览器。)

<svg width="138px" height="138px" viewBox="0 0 138 138" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="50%" cy="4.72722907%" fx="50%" fy="4.72722907%"
                    r="45.2727709%" id="radialGradient-1">
        <stop stop-color="#09FEFE" offset="0%"></stop>
        <stop stop-color="#3DFBFE" stop-opacity="0" offset="100%"></stop>
        <animate attributeName="r" values="45%;80%;45%" keyTimes="0;0.5;1"
                 dur="2s" repeatCount="indefinite"
                 calcMode="spline" keySplines=".5 0 .5 1;.5 0 .5 1" />
    </radialGradient>
  </defs>
  <path style="fill:none;stroke:url(#radialGradient-1);stroke-width:4"
        d="M69,2 C31.9969218,2 2,31.9969218 2,69 C2,106.003078 31.9969218,136 69,136 C106.003078,136 136,106.003078 136,69 C136,31.9969218 106.003078,2 69,2 Z"></path>
</svg>

CSS 动画：拉伸和压缩圆弧

CSS animation: Stretch and compress arc

css

svg

css-animations

svg-animate