没有 css 的 Svg 动画

Question

我想创建一个像这样围绕两个形状旋转的动画。我想在没有外部 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>

Answer 1

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

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

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 动画的区别

Answer 2

如果将文件加载到矢量编辑器中，我们会看到形状在 SVG 之外 canvas。

因此，您被迫使用变换命令将表单恢复到自定义视口。

实用建议

有必要在矢量编辑器中绘制，这样形状就不会超出 SVG 的边界 canvas。

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

要获取细分，请使用 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>

没有 css 的 Svg 动画

Svg animation without css

animation

svg

来源：