如何在javascript代碼中實現html元素？

Question

我正在嘗試設計一個示例網頁，我正面臨一些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>

在上面的示例代碼中，'line'將在頁面啟動時立即開始旋轉，但我希望在按下START按鈕后旋轉線，這樣的話......

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

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

Answer 1

beginElement方法將啟動動畫。 在標記中將begin屬性設置為indefinite將使其在javascript啟動之前停止運行。

 html, body { width: 100%; height: 100%; } 

 <input type="button" value=" START " onclick="start()" class="control-menu-top-btn" id="green-btn"> <script> function start() { document.getElementById("transform").beginElement(); } </script> <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 id="transform" attributeName="transform" attributeType="XML" type="rotate" from="25" to="360" dur="100s" begin="indefinite" /> </line> </g> </svg>