没有 CSS 的 Svg 动画

Question

我想创建一个像这样围绕这两个形状的动画。我想在 SVG 中实现它，而不需要外部 CSS。谁能帮我知道该怎么做吗？

这是我的代码

<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

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

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

实用建议

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

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

• 要获取线段，请使用stroke-dasharray="251,1004",
  where 251- dash, 1004- space
• 为了使旋转动画化，除了角度之外，还需要另外指定旋转中心的坐标

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

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

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