How to implement a html element inside a javascript code?

Question

I am trying to design a sample web page, and I'm facing some issues with svg....

I have created an svg circle with a line over it which will rotate with in the circle. Here is the sample code.

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

In the sample code above the 'line' will start rotating immediately when the page is launched, but I want the line to be rotated after I press the START button, something like this...

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

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

Don't know what you mean. You want to create a HTML element in JS and insert after in the HTML code? — aSoler, Aug 21 '15 at 11:46
possible duplicate of [SVG trigger animation with event](http://stackoverflow.com/questions/8455773/svg-trigger-animation-with-event) — nkorth, Aug 21 '15 at 11:51

score 3 · Accepted Answer · answered Aug 21 '15 at 13:24

The beginElement method will start an animation. Setting the begin attribute to indefinite in the markup will stop it from running before the javascript starts it.

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>

thanks....and if possible can you tell me how to change the 'from' or 'to' attributes of **animateTransform** from within function start()... — Legolas, Aug 21 '15 at 15:27

How to implement a html element inside a javascript code?

1 Answers1