如何在javascript代码中实现html元素？

我正在尝试设计一个示例网页，但我在svg方面遇到了一些问题

我已经创建了一个svg圆，上面有一条线，它将在圆中随旋转。下面是示例代码

<?xml version="1.0" encoding="iso-8859-1"?>

<svg width="100%" height="100%">
<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="25" to="360" dur="100s"/>
</line>
</svg>

在示例代码中，当页面启动时，上面的“行”将立即开始旋转，但我希望在按下“开始”按钮后，该行将旋转，类似这样的

<input type="button" value=" START " onclick="start()" class="control-menu-top-btn" id="green-btn">

<script language="javascript" type="text/javascript">
function start()
{
  .. ?
}
</script>

函数start（）
{
.. ?
}

beginElement方法将启动动画。在标记中将begin属性设置为unfinite将在javascript启动它之前停止它的运行

html，正文{
宽度：100%；
身高：100%；
}

函数start（）
{
document.getElementById（“transform”）.beginElement（）；
}

我不知道你的意思。你想在JS中创建一个HTML元素，然后在HTML代码中插入？可能是重复的，谢谢…如果可能的话，你能告诉我如何在函数start（）…setAttribute中更改animateTransform的“from”或“to”属性，就像任何其他属性一样。