Css 如何从中心点设置svg线的动画？_Css_Svg

Css 如何从中心点设置svg线的动画？

css svg

Css 如何从中心点设置svg线的动画？,css,svg,Css,Svg,我将下面的垂直线作为svg元素（使用Inkscape制作），现在我想让它从中心绘制自己，而不是从上到下或从下到上我正在为您的路径设置动画，尽管我删除了变换并更改了视口，因为我想查看孔路径。你可以利用你所拥有的我使用的是SMIL动画，但你也可以使用同样的想法，用css来制作动画在我的代码中，79.375是路径的总长度。您可以使用getTotalLength（）获取路径的总长度 39.69是总长度的一半其主要思想是：我正在设置笔划dasharray的动画，从笔划=0间距=79.375到间距

我将下面的垂直线作为svg元素（使用Inkscape制作），现在我想让它从中心绘制自己，而不是从上到下或从下到上

我正在为您的路径设置动画，尽管我删除了变换并更改了视口，因为我想查看孔路径。你可以利用你所拥有的

我使用的是SMIL动画，但你也可以使用同样的想法，用css来制作动画

在我的代码中，79.375是路径的总长度。您可以使用

getTotalLength（）

获取路径的总长度

39.69是总长度的一半

其主要思想是：我正在设置

笔划dasharray

的动画，从笔划=0间距=79.375到间距=0间距=79.375

此外，我正在设置笔划dashoffset从=“-39.69”到=“0”的动画

svg{宽度：50px；边框：1px纯银；}