关键词：
【中文标题】SVG 动画 - 来自中心的 SVG 的 CSS 悬停动画【英文标题】：SVG Animation - CSS Hover Animation For SVG From The Center 【发布时间】：2021-02-02 02:50:03 【问题描述】：我在GSAP中做过这个效果这里是Codepen作为参考：
https://codepen.io/whitelionx/full/vYGQqBZ
const svgs = document.querySelectorAll("svg");
svgs.forEach((svg) =>
const tl = gsap
.timeline(
defaults: ease: "power1.in" ,
paused: true
)
.to(svg.children[0], drawSVG: "50% 50%" )
.from(svg.children[1], drawSVG: "0% 0%" , 0);
svg.addEventListener("mouseenter", () => tl.play());
svg.addEventListener("mouseleave", () => tl.reverse());
);
现在我想只用 CSS 来做，这样当我悬停我的 svg 时，我会得到相同的效果，这是我的代码沙箱：
https://codesandbox.io/s/xenodochial-benz-17lss?file=/src/styles.css
【问题讨论】：
【参考方案1】：我已经修改了一些东西来为 stroke-dasharray 设置动画。
body
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
svg
width: 50px;
height: 50px;
margin: 25px;
.circle
stroke-dasharray: 28.3,0,28.3;
transform-origin: 50% 50%;
transform: rotate(180deg);
transition: stroke-dasharray 0.5s linear;
.line
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.5s linear;
svg:hover .circle
stroke-dasharray: 0,56.0;
svg:hover .line
stroke-dashoffset: 0;
<svg
version="1.1"
shape-rendering="auto"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 20 20"
xml:space="preserve">
<path class="circle" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1z"/>
<path class="line" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,0v20"/>
</svg>【讨论】：
【参考方案2】：与此同时，我也这样做了，现在由于您的回答，我对 css 动画有了更好的理解：D 开箱即用
body
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
svg
width: 50px;
height: 50px;
margin: 25px;
cursor: pointer;
.circle
stroke-dasharray: 56.6;
stroke-dashoffset: 0;
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.3s linear, transform 0.3s linear;
.line
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.3s linear;
svg:hover .circle
stroke-dashoffset: 56.6;
transform: rotate(180deg);
svg:hover .line
stroke-dashoffset: 0;
<svg
version="1.1"
shape-rendering="auto"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 20 20"
enable-background="new 0 0 20 20"
xml:space="preserve"
>
<path
class="circle"
fill="none"
stroke="#FFFFFF"
stroke-miterlimit="10"
d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1z"
></path>
<path
class="line"
fill="none"
stroke="#FFFFFF"
stroke-miterlimit="10"
d="M10,0v20"
></path>
</svg>【讨论】：
SVG 变换原点 CSS 动画 – Firefox 错误
】SVG变换原点CSS动画–Firefox错误【英文标题】：SVGTransformOriginCSSAnimation–FirefoxBug【发布时间】：2018-01-1901:08:33【问题描述】：试图让SVG/CSS动画跨浏览器工作。我知道thisfirefoxbug，但奇怪的是使用transform-box:fill-box;在一种情况下... 查看详情
svg子元素上的CSS变换原点问题
...遇到了transform-origin的问题。在尝试缩放较大svg中的框的动画时，它使用整个svg的变换原点(0,0)，而不是我尝试缩放的元素的中心。这使它看起来像是“从左上角飞入”，这不是我想要的。我希望让它从元素中心缩放。如 查看详情
带有 css 的 Svg 动画 - 回退 IE
】带有css的Svg动画-回退IE【英文标题】：Svganimationwithcss-fallbacksIE【发布时间】：2016-04-0513:22:23【问题描述】：在CSS/SVG动画上回退IE不支持问题的最佳选择是什么？【问题讨论】：javascript::GreenSock-Snap.svg-Raphael.js-和jQuery，或具有SV... 查看详情
Firefox 上 CSS 动画前后的 SVG 模糊
】Firefox上CSS动画前后的SVG模糊【英文标题】：SVGblurrybeforeandafterCSSanimationonFirefox【发布时间】：2014-10-2617:26:15【问题描述】：我想使用CSS转换为SVG徽标的某些部分设置动画。无动画的SVG渲染得非常好，在动画过程中，一切看起来... 查看详情
svg交互动画制作
前面我们已经说过了要怎样制作CSS3动画，但是SVG动画一直都没有时间研究过，正好趁现在有一点时间静下心来研究一下。一般来说，常见前端动画实现方案分为三种，CSS3动画，HTML动画（SVG动画），JS动画或者我们可以称之为Canv... 查看详情
svg+动画和css3动画的区别
...页使用的矢量图像，可以用AI进行编辑和生成。css3给svg加动画（改变尺寸、位置等）可以使用@keyframes和animation属性定义动画不过svg本身就支持动画参见：http://msdn.microsoft.com/zh-cn/library/gg193979本回答被提问者采纳 查看详情
svg动画精髓(代码片段)
TL;DR本文主要是讲解关于SVG的一些高级动画特效，比如SVG动画标签，图形渐变，路径动画，线条动画，SVG裁剪等。例如：路径动画图形渐变：线条动画：以及，相关的动画的矩阵知识，这个也是现在CSS动画里面最重要，同时也是... 查看详情
带有变换的css关键帧动画不适用于SVG
】带有变换的css关键帧动画不适用于SVG【英文标题】：csskeyframesanimationwithtransformnotworkingonSVG【发布时间】：2016-02-0709:51:36【问题描述】：当我尝试使用CSS关键帧动画为SVG文本设置动画时，它不会为变换属性设置动画。动画填充... 查看详情
SVG 动画圆圈垂直和水平居中
】SVG动画圆圈垂直和水平居中【英文标题】：SVGanimatedcirclestothecenterverticallyandhorizontally【发布时间】：2021-11-1805:15:09【问题描述】：我正在尝试创建一个SVG加载占位符，我想将3个动画圆圈垂直和水平放置在矩形中的中心，而不... 查看详情
检测浏览器对 CSS 动画 SVG 的支持
】检测浏览器对CSS动画SVG的支持【英文标题】：DetectbrowsersupportforCSS-animatedSVG【发布时间】：2015-10-1214:45:36【问题描述】：我在玩CSS-animatedSVG元素，遇到了一个问题，即使使用的所有技术都被某些浏览器支持，但组合不支持，即C... 查看详情
动画 css svg 泵
】动画csssvg泵【英文标题】：Animationcsssvgpump【发布时间】：2022-01-2103:27:15【问题描述】：有人可以帮我处理svg的胺化吗？我正在尝试创建泵叶轮的动画。我想要的是svg的最后4个元素做一个旋转叶轮效果。让它看起来像在旋转。... 查看详情
GPU 加速 CSS 动画与 SVG 原生动画
】GPU加速CSS动画与SVG原生动画【英文标题】：GPUacceleratedCSSanimationvsSVGnativeanimations【发布时间】：2014-10-0316:32:53【问题描述】：我的问题是，什么是更快的原生SVG动画标签，例如：<pathd="somethingverylongandnon-human-friendly"><animat... 查看详情
SVG + css3 动画不适用于链接标记
】SVG+css3动画不适用于链接标记【英文标题】：SVG+css3animationnotworkingwithlinkmarkup【发布时间】：2013-05-2615:30:11【问题描述】：大家好！我一直在阅读ChrisCoyer(http://css-tricks.com/using-svg/)的精彩文章“使用SVG”，并决定使用一些东西来... 查看详情
css如何用css动画svg的填充颜色？(代码片段)
使用 css 为我的 svg 文件设置动画时遇到问题
】使用css为我的svg文件设置动画时遇到问题【英文标题】：havingissueanimatingmysvgfileusingcss【发布时间】：2021-10-2719:55:39【问题描述】：我发现了这个有趣的文档，它展示了如何使svg文件动画化。https://css-tricks.com/svg-line-animation-works... 查看详情
（转）利用svg和css3实现有趣的边框动画
...我们来探索一下CarlPhilipeBrenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或... 查看详情
如何使用 JQuery 控制基于 CSS 的 SVG 动画？
】如何使用JQuery控制基于CSS的SVG动画？【英文标题】：HowtocontroltheSVGanimationwhichisbasedinCSSusingJQuery?【发布时间】：2020-10-0304:27:00【问题描述】：我想完全同步svg动画，被初始化多个变量卡住了，许多组既有路径又有线条，我想让... 查看详情
CSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间
】CSS过渡属性覆盖SVG元素上的jQuery动画时间【英文标题】：CSStransitionpropertyoverridesjQueryanimationtimeonSVGelement【发布时间】：2016-03-1322:57:00【问题描述】：我有一个不错的小SVG元素，我通过将其从0px到70px增长来制作动画。这个元素... 查看详情