I want to show a png image (circle shape) with an animation.
At start the image will not appear, but will appear with a "clockwise display: block" effect.
My idea is a SVG cover with the desired effect, going from e.g: red to transparent fill. Is this possible?
Any ideas?
Thanks.
Here's one simple way. It's just a diamond shape, larger than the image, whose points I slowly collapse together like a closing fan.
Because of the diamond shape, it doesn't have a consistent sweep speed. But if you use short animation duration, you don't really notice. If you want to make the speed more consistent, you could add more points. For example, use an octagon, rather than a diamond.
<svg width="400" height="400" viewBox="0 0 400 400">
<image href="https://i.imgur.com/pHSdFlP.jpg" width="400" height="400"/>
<polygon points="200,-200, 600,200, 200,600, -200,200" fill="red">
<animate attributeName="points"
attributeType="XML"
dur="1s"
values="200,-200, 600,200, 200,600, -200,200, 200,-200, 200,200;
600,200, 600,200, 200,600, -200,200, 200,-200, 200,200;
200,600, 200,600, 200,600, -200,200, 200,-200, 200,200;
-200,200, -200,200, -200,200, -200,200, 200,-200, 200,200;
200,-200, 200,-200, 200,-200, 200,-200, 200,-200, 200,200"
fill="freeze"/>
</polygon>
</svg>
Using <animateTransform>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<svg width=272 height=92
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="./google.png" height="100%" width="100%"/>
<rect x="0" y="0" width="272" height="90" fill="#FFF">
<animateTransform attributeName="transform"
attributeType="XML"
additive="sum"
type="scale"
from="1 1"
to="0 0"
dur="2s"
fill="freeze"/>
</rect>
</svg>
</body>
</html>
Related
I am working with a svg element which is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">60%</text>
</g>
</g>
</g>
</g>
</svg>
</body>
<script type="text/javascript"></script>
</html>
With javascript, I intend to generate a svg which will show each yAxis grid line after the text. e.g.
To programmatically generate this, my approach was to generate a clipPath with a rect that starts at x=text.x+text.width and same y,width as the lines and height=text.height and have it apply on each line.
This is what I tried so far
const svgns = 'http://www.w3.org/2000/svg';
document.querySelectorAll('.tick>line').forEach(
(a, i) => {
const defs = document.createElementNS(svgns, 'defs');
document.querySelector('svg').appendChild(defs);
const clipPath = document.createElementNS(svgns, 'clipPath');
clipPath.setAttribute('id', `clip${i}`);
defs.appendChild(clipPath);
const data = document.querySelectorAll('.tick>text');
const rect = document.createElementNS(svgns, 'rect')
rect.setAttribute('x', `${data[i].getBoundingClientRect().x+data[i].getBoundingClientRect().width}`);
rect.setAttribute('y', `${a.getBoundingClientRect().y}`);
rect.setAttribute('height', `${data[i].getBoundingClientRect().height}`)
rect.setAttribute('width', `${a.getBoundingClientRect().width}`)
clipPath.appendChild(rect);
a.style.setProperty('clip-path', `url(#clip${i})`)
}
)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">60%</text>
</g>
</g>
</g>
</g>
</svg>
</script>
</html>
I can't figure out what I am doing wrong in this. it does not return what I was intending.
Also, is there a built-in method currentyl exists in javascript that does union/combine/intersect/subtract operations of svg elements?
This worked for me
const svgns = 'http://www.w3.org/2000/svg';
document.querySelectorAll('.tick>line').forEach(
(a,i)=>{
const defs = document.createElementNS(svgns, 'defs');
document.querySelector('svg').appendChild(defs);
const clipPath = document.createElementNS(svgns, 'clipPath');
clipPath.setAttribute('id',`clip${i}`);
defs.appendChild(clipPath);
const data = document.querySelectorAll('.tick>text');
const rect = document.createElementNS(svgns, 'rect')
rect.setAttribute('x', `${data[i].getComputedTextLength()}`);
//rect.setAttribute('y', `${a.getBoundingClientRect().y}`);
rect.setAttribute('height', `${data[i].getBBox().height}`)
rect.setAttribute('width', `${a.x2.baseVal.value-a.x1.baseVal.value}`)
clipPath.appendChild(rect);
a.style.setProperty('clip-path',`url(#clip${i})`)
}
)
const svgns = 'http://www.w3.org/2000/svg';
document.querySelectorAll('.tick>line').forEach(
(a,i)=>{
const defs = document.createElementNS(svgns, 'defs');
document.querySelector('svg').appendChild(defs);
const clipPath = document.createElementNS(svgns, 'clipPath');
clipPath.setAttribute('id',`clip${i}`);
defs.appendChild(clipPath);
const data = document.querySelectorAll('.tick>text');
const rect = document.createElementNS(svgns, 'rect')
rect.setAttribute('x', `${data[i].getComputedTextLength()}`);
//rect.setAttribute('y', `${a.getBoundingClientRect().y}`);
rect.setAttribute('height', `${data[i].getBBox().height}`)
rect.setAttribute('width', `${a.x2.baseVal.value-a.x1.baseVal.value}`)
clipPath.appendChild(rect);
a.style.setProperty('clip-path',`url(#clip${i})`)
}
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">60%</text>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
d3 equivalent
const clipRectData =d3.selectAll('.tick>text').nodes();
d3.select('svg')
.selectAll('defs')
.data(d3.selectAll('.tick>line'))
.join('defs')
.append('clipPath')
.attr('id', (d, i) => { return `clip${i}` })
.append('rect')
.attr('x', (d, i) => {
return `${clipRectData[i].getComputedTextLength()}`
})
.attr('height', (d, i) => {
return `${clipRectData[i].getBBox().height}`
})
.attr('width', (d, i) => {
return `${d.x2.baseVal.value-d.x1.baseVal.value}`
})
d3.selectAll('.tick>line').style('clip-path', (d, i) => {
return `url(#clip${i})`
})
I am trying to add an SVG g element to an SVG tag using JavaScript. The g element is defined in a template tag. It is in a template tag as I want to reuse it many times.
<!DOCTYPE html>
<html>
<head>
<title>Template Example</title>
<style media="screen">
svg {
margin: auto;
}
g {
stroke:black;
stroke-width:2px;
fill:none;
}
</style>
</head>
<body>
<template>
<g>
<line x1=" 2" y1="2" x2=" 7" y2="7" ></line>
<line x1="25" y1="2" x2="20" y2="7" ></line>
<path class="botLeft" d="m 1,26 6,-6" ></path>
<path class="botRite" d="m 26,26 -6,-6" ></path>
<rect x="1" y="1" rx="3" ry="3" width="25" height="25" ></rect>
<path class="rectIn" d="m 7,7 0,13 13,0 0,-13 z" style="fill:gray;" ></path>
</g>
</template>
<svg width="80%" height="80%" ></svg>
<script type="text/javascript">
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
var svg = document.getElementsByTagName("svg")[0];
svg.appendChild(clon);
</script>
</body>
</html>
This code adds the g element to the DOM in the correct place, but the element is not rendered.
After reading other posts regarding SVG, I think this is because this is not a normal HTML element, but an SVG Element.
How do I advise the browser to treat this as an SVG element?
I have seen some remarks hinting at namespaces but can not understand what is needed.
Any pointers will be appreciated ;-)
If you put the elements in the SVG itself and embed them with a <defs> tag instead of a <template> tag they will all get created in the right namespace and also be invisible.
<!DOCTYPE html>
<html>
<head>
<title>Template Example</title>
<style media="screen">
svg {
margin: auto;
}
g {
stroke:black;
stroke-width:2px;
fill:none;
}
</style>
</head>
<body>
<svg width="80%" height="80%" >
<defs>
<g>
<line x1=" 2" y1="2" x2=" 7" y2="7" ></line>
<line x1="25" y1="2" x2="20" y2="7" ></line>
<path class="botLeft" d="m 1,26 6,-6" ></path>
<path class="botRite" d="m 26,26 -6,-6" ></path>
<rect x="1" y="1" rx="3" ry="3" width="25" height="25" ></rect>
<path class="rectIn" d="m 7,7 0,13 13,0 0,-13 z" style="fill:gray;" ></path>
</g>
</defs>
</svg>
<script type="text/javascript">
var temp = document.getElementsByTagName("g")[0];
var clon = temp.cloneNode(true);
var svg = document.getElementsByTagName("svg")[0];
svg.appendChild(clon);
var clon2 = temp.cloneNode(true);
clon2.setAttribute("transform", "translate(50,0)");
svg.appendChild(clon2);
</script>
</body>
</html>
I would like to dynamically replace a text element of an svg object from a local text file. Below my files text et svg:
text file:
<p id="p1">It works fine</p>
text svg:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect id="svg_1" height="87" width="162" y="188" x="130" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="blue" fill="yellow"/>
<text xml:space="preserve" text-anchor="start" font-family="serif" font-size="24" id="divA" y="240" x="313" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="blue"> </text>
</svg>
It works fine with the div or if I put the value, for example dog, for the element svg to modify. below mon fichier html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = $("#divA").load("demo_test.txt #p1");
var y = $("#div1").load("demo_test.txt #p1");
document.getElementById("div1").textContent = y;
var svg = document.getElementById("textsvg");
var svgDoc = svg.contentDocument;
svgDoc.getElementById("divA").textContent = "dog";
});
</script>
</head>
<body>
<div id="div1"><h2>PSU0 to PDU-A G0-2</h2></div>
<object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"></object>
</body>
However, when I put the variable y for the text element svg I have the message "[object Object]" instead of the message "It works fine". Below the html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = $("#divA").load("demo_test.txt #p1");
var y = $("#div1").load("demo_test.txt #p1");
document.getElementById("div1").textContent = y;
var svg = document.getElementById("textsvg");
var svgDoc = svg.contentDocument;
svgDoc.getElementById("divA").textContent = x;
});
</script>
</head>
<body>
<div id="div1"><h2>PSU0 to PDU-A G0-2</h2></div>
<object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"></object>
</body>
Can you help me.
Thanks,
B.R,
<script>
$(document).ready(function(){
$("#divA").html("Gorillaz Inc");
});
</script>
This works with jquery
Full example: http://codepen.io/anon/pen/pRRgaP
Note: I didn't use files, I just updated the svg dynamically
I solved part of my problem. I have directly embedded the "svg" into my html.
I noticed that by downloading the text file without the tags: demo_text1.txt the div appears well and the text svg:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").load("demo_test.txt #p2");
$("#divA").load("demo_test1.txt");
});
</script>
</head>
<body>
<div id="div1"><h2 style="color:blue">PSU0 to PDU-A G0-2</h2></div>
<svg width="800" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect id="svg_1" height="87" width="162" y="20" x="5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="blue" fill="yellow"/>
<text xml:space="preserve" text-anchor="start" font-family="serif" font-size="14" id="divA" y="67" x="175" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="blue"> </text>
</svg>
</body>
</html>
fichier text:demo_test.txt
<p id="p1" >It works fine</p>
<p id="p2" style="color:blue">I use the local text file "demo_test.txt".The "div" works fine with tags</p>
fichier text:demo_text1.txt
I use the local text file "demo_test1.txt".
The text of svg works fine without tag but doesn't work with tags
Screen display ok:
enter image description here
However, by pointing the text svg to the text file with the tags (demo_test.txt, it does not work:
Screen not ok:
enter image description here
I created simple SVG document and open it in Chrome and FF
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="4in" height="3in">
<g>
<title>Company sales by region</title>
</g>
</svg>
Why does document.title return ""?
According to standard https://www.w3.org/TR/html51/dom.html#dom-tree-accessors
document . title [ = value ]
Returns the document’s title, as given by the title element for HTML and as given by the SVG title element for SVG.
Try document.title on this instead:
<svg xmlns="http://www.w3.org/2000/svg"
width="4in" height="3in">
<title>Company sales by region</title>
</svg>
The spec says:
If the document element is an SVG svg element, then let value be the child text content of the first SVG title element that is a child of the document element.
So the reason document.title returns "" for the snippet in the question is that in that snippet the title element isn’t a child of the document element (the svg element).
To display a hint message when you hover over an svg element, you need to wrap it with group tags.
You have group tags <g> but inside is empty.
See the example below where the prompt will be displayed:
<svg width="50%" height="50%" viewBox="0 0 400 400">
<g id="titleRect">
<title> This is a green square </title>
<rect id="rect1" x="10" y="100" width="100" height="100" fill="yellowgreen" />
</g>
<g id="titleCircle">
<title> This is a purple circle. </title>
<circle id="circle1" cx="200" cy="150" r="50" fill="purple" />
</g>
</svg>
Multi-line tooltip
To get a multi-line tooltip, you must use a line break inside the <title> tags
html, body, svg {
margin: auto;
width: 100vmin;
display: block;
}
<svg viewBox="-4 -4 8 8">
<g>
<title>Multiline
the tooltip is
very easy!</title>
<circle r="4" fill="purple" />
</g>
</svg>
The second way to get a multiline tooltip
This method uses nested tags <title>
<title>
<title> ⧉ Atom properties </title>
<title> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ </title>
<title> Name: oxygen </title>
<title> Atomic mass (molar mass) :15,99903 </title>
<title> Atomic radius 60 (48) пм </title>
<title> ⧉ Chemical properties </title>
<title>
Hover cursor the center circle and see a multiline tooltip.
.container {
width:40%;
height:40%;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-52 -53 100 100" stroke-width="2">
<g fill="none">
<g>
<title> Orbit of the first atom </title>
<ellipse fill="#F0F0F0" stroke="#66899a" rx="6" ry="44" />
</g>
<g>
<ellipse fill="#F0F0F0" stroke="#e1d85d" rx="6" ry="44" transform="rotate(-66)"/>
<title> Orbit of the second atom </title>
</g>
<g>
<ellipse fill="#F0F0F0" stroke="#80a3cf" rx="6" ry="44" transform="rotate(66)"/>
<title> Orbit of the third atom </title>
</g>
<circle stroke="#4b541f" r="44"/>
</g>
<g fill="#66899a" stroke="white">
<g>
<title>
<title> ⧉ Atom properties </title>
<title> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ </title>
<title> Name: oxygen </title>
<title> Atomic mass (molar mass) :15,99903 </title>
<title> Atomic radius 60 (48) пм </title>
<title> ⧉ Chemical properties </title>
<title> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ </title>
<title> Covalent radius 73 пм </title>
<title> Ion radius 132 (-2e) пм </title>
<title> Electrode potential 0 </title>
<title>⧉Thermodynamic properties of a simple substance </title>
<title> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ </title>
<title>Density (at n. At.) Gas: 1,42897 kg/m³ </title>
<title>Melting temperature 54,8 К (-218,35 °C) </title>
<title>Boiling temperature 90,19 К (-182,96 °C) </title>
</title>
<circle fill="#80a3cf" r="13"/>
</g>
<g>
<title>First atom</title>
<circle cy="-44" r="9"/>
</g>
<g>
<title>Second atom</title>
<circle cx="40" cy="18" r="9"/>
</g>
<g>
<title>Third atom</title>
<circle cx="-40" cy="18" r="9"/>
</g>
</g>
</svg>
</div>
I've created a little page just as this one here:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function test() {
executeAnimation();
}
</script>
</head>
<body>
<h1>Tester</h1>
<embed src="test.svg" type="image/svg+xml" />
<hr />
<input type='button' value='Test' onclick='test()' />
</body>
</html>
The test.svg looks like this:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg id="testSvgId" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="950" height="900">
<title>Title</title>
<desc>Desc</desc>
<defs>
<script type="text/javascript">
<![CDATA[
function executeAnimation () {
document.getElementById('anim').beginElement();
}
]]>
</script>
</defs>
<ellipse cx="500" cy="1090" rx="600" ry="0" fill="rgb(94,114,54)">
<animate id="anim" attributeType="XML" attributeName="ry" begin="indefinite" dur="2s" from="0" to="350" fill="freeze" />
</ellipse>
</svg>
As you can see, I want to call from JavaScript in the HTML page the function executeAnimation() which is defined insite the SVG image. This actually does not work.
I also tried this:
<svg onload='onloadFunction()'...>
...
function onloadFunction() {
alert('i am loading');
window.executeAnimation = executeAnimation();
}
This was suggested in another forum, but this did also not work (window.executeAnimation was undefined from outside).
What would be the real correct way to do this?
Without seeing the source of your .svg, it's impossible to answer specifically...
Check this out: https://codepen.io/lambdacreatives/pen/uygzk
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="77px" height="77px" viewBox="0 0 77 77" enable-background="new 0 0 77 77" xml:space="preserve">
<g>
<path id="d" fill="#ffffff" d="M49.045,61.112c2.549-1.198,4.867-2.798,6.857-4.743L36.83,13.587c-2.862,0.186-5.602,0.826-8.124,1.899
l6.448,14.465l-15.12,25.387c1.866,2.038,4.044,3.785,6.489,5.118L39.236,39.11L49.045,61.112z"/>
<path id="circle" fill="#ffffff" d="M38.457,67.2c-15.852,0-28.701-12.848-28.701-28.701c0-15.851,12.85-28.697,28.701-28.697
c5.773,0,11.137,1.72,15.639,4.653l4.605-7.702c-6.049-3.873-13.114-5.998-20.359-5.998C17.531,0.754,0.6,17.687,0.6,38.499
c0,20.813,16.932,37.746,37.742,37.746c8.438,0,16.48-2.773,23.061-7.865l-3.809-8.533C52.514,64.405,45.818,67.2,38.457,67.2z">
<animateTransform
xlink:href="#circle"
attributeName="transform"
attributeType="XML"
id="ani-circle"
type="rotate"
from="0 38.501500725746155 38.4994986653327945"
to="360 38.501500725746155 38.4994986653327945"
dur="0.3s"
begin="click"
repeatCount="1"
fill="freeze" />
</path>
</g>
</svg>
<br><br>
<button id="trigger">Trigger Animation</button>
CSS
body {
background-color: black;
text-align: center;
}
svg {
height: 100%;
width: 200px;
path {
fill: white;
}
}
JS
$( "#trigger" ).click(function() {
document.getElementById("ani-circle").beginElement();
});
If you can't work it out from that, post the source of your .svg and I'll knock up a specific answer for you.