如何移动svg元素？

debugcn 发表于 Dev

莱戈拉斯

这是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>

复制粘贴并尝试，以获得清晰的上下文

我的要求是我想沿着圆旋转“线”，但是我希望它根据我的值旋转（例如：我希望将线放置在要放置的位置，但是对于我的代码，它开始从开始位置到结束位置自动旋转）...

任何帮助，将不胜感激..

保罗·勒博

您的问题不清楚。听起来您是在说您不希望它具有旋转动画。您只希望线成45度角。那正确吗？

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

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。