没有css的svg动画答案

【问题标题】：Svg animation without css没有css的svg动画
【发布时间】：2021-12-15 00:51:19
【问题描述】：

我想创建一个像这样围绕两个形状旋转的动画。我想在没有外部 CSS 的 SVG 中实现它。谁能帮我看看怎么做？

这是我的代码

<svg xmlns="http://www.w3.org/2000/svg" width="542" height="542" viewBox="0 0 542 542">
  <g id="svg" transform="translate(-655 -265)">
    <circle id="Ellipse_3" data-name="Ellipse 3" cx="271" cy="271" r="271" transform="translate(655 265)" fill="none"/>
    <path id="Path_1" data-name="Path 1" d="M818.25,412.875l.71.931c116.417,110.219-.023,204.664-.382,205.428-.045.089-.2.312-.375.672-2.758,5.713,3.239,3.015,3.594,2.858,147.217-64.969,210.869-212.39,210.672-213.249-.359-1.7-3.069-1.088-3.344-.781-4.366,4.893-81.574,88.727-207.317.617-.169-.118.317.2-.673-.473s-2.369-1.12-3.148-.181-.909,2.256.388,4.35" fill="none" stroke="#707070" stroke-width="1"/>
    <path id="Path_2" data-name="Path 2" d="M927.651,569.319s69.788,5.194,99.3,51.994c.017.04,4.351,6.826,5.406-.172a1.6,1.6,0,0,0,.069-.516,5.747,5.747,0,0,0-.21-2.031c-3.036-7.836-31.037-76.552-54.932-98.845-.009-.009-35.627,38.007-49.635,49.57" fill="none" stroke="#707070" stroke-width="1"/>
    <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(655 496)" fill="#f90a2a" stroke="#000" stroke-width="1">
      <circle cx="34.5" cy="34.5" r="34.5" stroke="none"/>
      <circle cx="34.5" cy="34.5" r="34" fill="none"/>
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
    </g>
  </g>
</svg>

【问题讨论】：

@RobertLongson 你能给我一些指导吗？我试着用它做，但我不知道怎么做。
这是我创建的 SVG。我想为它制作动画。 codepen.io/alexios-leonidas/pen/gOxxqpR
我已经做到了。你能帮帮我吗？
它围绕自己旋转。我希望它围绕中间的两个形状旋转。
第一步是摆脱所有那些translates，所以你所有的进一步计算至少是有意义的；那就学SMIL

标签： animation svg

【解决方案1】：

实验性 <sprite-meister> Web 组件可以为你生成 CSS

清理 SVG 后：没有翻译，没有自动关闭标签
只剩下动画的第一帧
- 这不是 SVG，而是您可以编程的字符串模板文字
Sprite-Meister 为您生成其他 steps=48 帧
- circlepath 函数为每一帧计算一个x,y 位置
- 每个<circle cx="${v1.x}" cy="${v1.y}" 不旋转圆圈；
  它在每一帧的不同位置绘制圆圈
并使用 CSS 为生成的 SVG sprite-sheet 制作动画

<script src="//sprite-meister.github.io/element.js"></script>
<script>console.log=()=>{/*don't bloat SO snippet console*/}</script>

<sprite-meister duration="5s" w="542" h="542" width="180px" steps="48">
    ${ setv1( circlepath({ radius:200 }) , "yellow circle position" )}
    <text y="10%" font-size="50px">frame: ${framenr} </text>
    <path fill="green" d="m163 158 1 1c116 110 0 204 0 205l-1 1c-3 6 3 3 4 3a446 446 0 0 0 210-213c0-2-3-2-3-1-4 5-81 88-207 0h-4v4m105 150s69 6 99 52c0 0 4 7 5 0a6 6 0 0 0 0-2c-3-8-31-77-55-99 0 0-35 38-49 49"></path>
    <circle cx="${v1.x}" cy="${v1.y}" r="34" fill="yellow" stroke="blue"></circle>
</sprite-meister>

来源：

<sprite-meister> 不是 1.0 版

您需要大量的 SVG 知识，并首先学习（至少是基础知识）SVG SMIL 动画，这样您才能了解 sprite-sheet 动画的区别

【讨论】：

【解决方案2】：

如果您将文件加载到矢量编辑器中，我们将看到这些形状位于 SVG 画布之外。

因此，您不得不使用转换命令将表单带回自定义视口。

实用建议

必须在矢量编辑器中进行绘制，以使形状不会超出 SVG 画布的边界。

在矢量编辑器中重绘并清理文件后：

要获取分段，请使用stroke-dasharray="251,1004",
其中251 - 破折号，1004 - 差距
要为旋转设置动画，除了角度之外，还需要额外指定旋转中心的坐标

<animateTransform attributeName="transform" attributeType="XML" type="rotate"
 from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>

.container {
width:75vw;
height:auto;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg5" width="50%"  height="50%" viewBox="0 0 542 542" >
 <defs>
   <linearGradient id="Lg" x1="0" x2="0" y1="1" y2="0">
      <stop offset="0" stop-color="#DC143C" />
        <stop offset="0.8" stop-color="white" stop-opacity="0.05" />
   </linearGradient>
 </defs>   
<g id="g820" transform="translate(-658 -238)" fill="none" stroke="#707070" stroke-width="1">    
   
    <path id="Path_1" fill="black" stroke="black" d="m818 413 1 1c116 110 0 204 0 205l-1 1c-3 6 3 3 4 3a446 446 0 0 0 210-213c0-2-3-2-3-1-4 5-81 88-207 0h-4v4" data-name="Path 1" />
    <path id="Path_2" fill="#DC143C" d="M928 569s69 6 99 52c0 0 4 7 5 0a6 6 0 0 0 0-2c-3-8-31-77-55-99 0 0-35 38-49 49" data-name="Path 2" />
</g> 
   <circle id="Ellipse_3" data-name="Ellipse 3" stroke="url(#Lg)" cx="266" cy="278" r="220" fill="none" stroke="#DC143C" stroke-width="45" stroke-dasharray="251,1004" stroke-linecap="round" >
       <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>  
   </circle>   
   
</svg>
</div>

【讨论】：