Question

是Web应用程序开发的新手，我实际上是在尝试移动svg元素并遇到一些问题....这里是代码供您参考。

<!DOCTYPE html>
<html>
<body>

 <svg width=500 height=500>
              <circle cx="200" cy="200" r="100" stroke="black" stroke-width="4" fill="black" />
              <g transform="translate(200,200)">
              <line x1="0" y1="0" x2="100" y2="0" style="stroke:rgb(255,255,255);stroke-width:2">
                <animateTransform attributeName="transform"
                        attributeType="XML"
                        type="rotate"
                        from="0" to="360" dur="100s"/>
              </line>
            </svg>

</body>
</html>

复制粘贴＆amp;尝试一下，获得清晰的背景

我的要求是我要旋转＆＃34;线＆＃34;沿着圆圈，但是我希望它为我的值旋转（例如：我希望将线放置在我想要放置的位置，但是对于我的代码，它开始从开始到结束位置自动旋转）... < / p>

任何帮助将不胜感激..

Answer 1

这是我想你想要的尝试：

<svg width=500 height=500>
  <circle cx="100" cy="100" r="100" stroke="black" stroke-width="4" fill="black" />
  <g transform="translate(100 100)">
    <g>
      <line x1="0" y1="0" x2="100" y2="0" stroke="white" stroke-width="5" />
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="100s" />
    </g>
  </g>
</svg>

为什么我还需要一个g元素？如果您检查元素，您将看到animateTransform将transform属性添加到<g>元素，因此如果您设置翻译并使用animateTransform，它将超过它。

如果要为圆周围的线设置动画，可以使用描边属性：

.circ {
  animation: rotate 3s infinite;
}
@keyframes rotate {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 500;
  }
}
@-webkit-keyframes rotate {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 500;
  }
}

<svg width="300px" viewBox="0 0 100 100">
  <circle class="circ" cx="50" cy="50" r="20" fill="black" stroke="red" stroke-width="4" stroke-dasharray="70" />
</svg>

或者如果你想要一些东西实际上在路径上移动那么：

<svg width="500" height="350" viewBox="0 0 500 350">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.4,58.3c-13.8,0.1-33.3,0.4-44.8,9.2
    c-14,10.7-26.2,29.2-31.9,45.6c-7.8,22.2-13.5,48-3.5,70.2c12.8,28.2,47.1,43.6,68.8,63.6c19.6,18.1,43.4,26.1,69.5,29.4
    c21.7,2.7,43.6,3.3,65.4,4.7c19.4,1.3,33.9-7.7,51.2-15.3c24.4-10.7,38.2-44,40.9-68.9c1.8-16.7,3.4-34.9-10.3-46.5
    c-9.5-8-22.6-8.1-33.2-14.1c-13.7-7.7-27.4-17.2-39.7-26.8c-5.4-4.2-10.4-8.8-15.8-12.9c-4.5-3.5-8.1-8.3-13.2-11
    c-6.2-3.3-14.3-5.4-20.9-8.2c-5-2.1-9.5-5.2-14.3-7.6c-6.5-3.3-12.1-7.4-19.3-8.9c-6-1.2-12.4-1.3-18.6-1.5
    C222.5,59,212.5,57.8,202.4,58.3" />

  <g id="shape">
    <circle cx="0" cy="0" r="10" fill="cornflowerblue" />
    <line x1="0" y1="0" x2="0" y2="-20" stroke="black" stroke-width="5" />
  </g>

  <animateMotion xlink:href="#shape" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="">
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

Answer 2

你的问题不明确。听起来你说你不希望它有旋转动画。你只想让线条处于45度角。是吗？

如果是你想要的，那么删除animateTransform元素，然后在该行上放置一个固定的变换。如下：

＆＃13;

<svg width=500 height=500>
    <circle cx="200" cy="200" r="100" stroke="black" stroke-width="4" fill="black" />
    <g transform="translate(200,200)">
        <line x1="0" y1="0" x2="100" y2="0" style="stroke:rgb(255,255,255);stroke-width:2"
              transform="rotate(45)"/>
    </g>
</svg>

＆＃13;

如何移动svg元素？

2 个答案: