[英]How to implement a html element inside a javascript code?
我正在尝试设计一个示例网页,我正面临一些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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.