Call Javascript Function Inside Svg From Surrounding Html
I've created a little page just as this one here: Test
Solution 1:
Without seeing the source of your .svg, it's impossible to answer specifically...
Check this out: https://codepen.io/lambdacreatives/pen/uygzk
HTML
<svgversion="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><pathid="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"/><pathid="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"><animateTransformxlink: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><buttonid="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.
Post a Comment for "Call Javascript Function Inside Svg From Surrounding Html"