Hi All,
I’m trying to write an SVG script for my site, I want to press a button, which is a gradient circle and the XML code is in my HTML file, between an <article> tag, the SVG has an ID tag called Button, there is also another SVG in another <article> tag, but this one has an ID called Ring, it’s just a circle with no fill, it fits on the button and is places near the outside of it.
Now what I want to do is to press the button and the ring would get smaller at a slow rate, until it reaches the center and then expand quickly until it disappears off screen.
I know I need a event listener, like onmousedown, or some other, then I need to transform the scale of the circle, but I just don’t understand how I will do it, either with a <script> just after the <svg> tag but how do I call another ID from another <article> tag, or should I use an external JS file and call it in the HTML file. I’m just not sure how to approach this.
<article class="centre_relative">
<!-- SVG code for button gotten from Illustrator - just changed width and height -->
<svg version="1.1" id="Button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="497px" height="497px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<radialGradient id="SVGID_1_" cx="250.4414" cy="250.8535" r="248.7363" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#3FA9F5"/>
<stop offset="0.2151" style="stop-color:#378ED7"/>
<stop offset="0.4409" style="stop-color:#2F72B8"/>
<stop offset="0.6344" style="stop-color:#285A9E"/>
<stop offset="0.7796" style="stop-color:#23488A"/>
<stop offset="0.8871" style="stop-color:#203A7B"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<circle fill="url(#SVGID_1_)" cx="250.442" cy="250.854" r="248.736"/>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="259.642" cy="90.966" r="1.739"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="279.44" cy="340.765" r="1.958"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="425.642" cy="296.966" r="1.739"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="307.44" cy="203.765" r="1.958"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="50.44" cy="257.765" r="1.958"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="183.44" cy="422.765" r="1.958"/>
</g>
</g>
<g opacity="0.4">
<g>
<circle fill="#FFFFFF" cx="160.44" cy="73.765" r="1.958"/>
</g>
</g>
<g opacity="0.4">
<g>
<circle fill="#FFFFFF" cx="320.44" cy="446.765" r="1.958"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="133.44" cy="182.765" r="1.958"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="399.44" cy="229.765" r="1.958"/>
</g>
</g>
<g opacity="0.3">
<g>
<circle fill="#FFFFFF" cx="249.44" cy="255.765" r="1.958"/>
</g>
</g>
<g opacity="0.5">
<g>
<g>
<path fill="none" stroke="#E6E6E6" stroke-width="2" stroke-miterlimit="10" d="M63.31,309.638c0,0,16.865-30.499,51.201-13.285
c0,0,1.479,1.297-0.866,1.377c0,0-20.33-0.648-19.544,4.456c0,0,1.521,6.34,3.894,9.563c0,0,7.615-1.133,10.789,0.15
c0,0,0.725,0.825-1.696,1.266c0,0-5.905,0.211-7.212,2.691c0,0,3.642,9.402,8.653,21.586c3.15,7.662,6.843,16.423,10.514,24.642
c5.438,12.171,10.828,23.149,14.334,27.585c0,0,0.784,2.039-1.174,1.254c0,0-8.181-12.452-17.342-27.301
c-4.887-7.921-10.052-16.525-14.4-24.283c-4.505-8.036-8.135-15.164-9.672-19.692c0,0-3.834-0.216-8.04,3.93
c0,0-3.079,1.497-1.414-0.647c0,0,2.606-5.133,7.758-7.05c0,0-2.898-8.421-5.792-11.628c0,0-3.204-2.15-18.87,7.608
C64.431,311.859,60.818,313.025,63.31,309.638z"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#E6E6E6" stroke-width="2" stroke-miterlimit="10" d="M78.568,295.052c0,0,0.714-1.446-4.767-4.039"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#E6E6E6" stroke-width="2" stroke-miterlimit="10" d="M89.289,291.241c0,0-0.799-2.996,1.37-5.68"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#E6E6E6" stroke-width="2" stroke-miterlimit="10" d="M103.858,326.181c0,0,1.937-0.041,4.56,0.366"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#E6E6E6" stroke-width="2" stroke-miterlimit="10" d="M106.098,331.136c0,0,2.154,0.641,4.076,0.905"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#E6E6E6" stroke-width="2" stroke-miterlimit="10" d="M95.087,328.908c0,0-1.973,2.834-2.803,3.907"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#E6E6E6" stroke-width="2" stroke-miterlimit="10" d="M97.633,334.638c0,0-1.394,1.867-2.556,3.473"/>
</g>
</g>
<g opacity="0.6">
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="274.8682" y1="-137.3667" x2="343.209" y2="-137.3667" gradientTransform="matrix(0.9994 -0.0344 0.0344 0.9994 -206.4658 489.5508)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M63.31,309.638c0,0,16.865-30.499,51.201-13.285c0,0,1.479,1.297-0.866,1.377
c0,0-20.33-0.648-19.544,4.456c0,0,1.521,6.34,3.894,9.563c0,0,7.615-1.133,10.789,0.15c0,0,0.725,0.825-1.696,1.266
c0,0-5.905,0.211-7.212,2.691c0,0,3.642,9.402,8.653,21.586c3.15,7.662,6.843,16.423,10.514,24.642
c5.438,12.171,10.828,23.149,14.334,27.585c0,0,0.784,2.039-1.174,1.254c0,0-8.181-12.452-17.342-27.301
c-4.887-7.921-10.052-16.525-14.4-24.283c-4.505-8.036-8.135-15.164-9.672-19.692c0,0-3.834-0.216-8.04,3.93
c0,0-3.079,1.497-1.414-0.647c0,0,2.606-5.133,7.758-7.05c0,0-2.898-8.421-5.792-11.628c0,0-3.204-2.15-18.87,7.608
C64.431,311.859,60.818,313.025,63.31,309.638z"/>
</g>
</g>
<g>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="286.9326" y1="-186.6807" x2="291.5957" y2="-186.6807" gradientTransform="matrix(0.9994 -0.0344 0.0344 0.9994 -206.4658 489.5508)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_3_)" d="M78.568,295.051c0,0,0.714-1.445-4.768-4.039"/>
</g>
</g>
<g>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="302.3027" y1="-190.834" x2="303.9678" y2="-190.834" gradientTransform="matrix(0.9994 -0.0344 0.0344 0.9994 -206.4658 489.5508)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_4_)" d="M89.289,291.241c0,0-0.799-2.996,1.37-5.68"/>
</g>
</g>
<g>
<g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="315.7627" y1="-152.3374" x2="320.3076" y2="-152.3374" gradientTransform="matrix(0.9994 -0.0344 0.0344 0.9994 -206.4658 489.5508)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_5_)" d="M103.858,326.181c0,0,1.937-0.041,4.56,0.366"/>
</g>
</g>
<g>
<g>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="317.8301" y1="-147.0474" x2="321.8721" y2="-147.0474" gradientTransform="matrix(0.9994 -0.0344 0.0344 0.9994 -206.4658 489.5508)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_6_)" d="M106.098,331.136c0,0,2.154,0.641,4.076,0.905"/>
</g>
</g>
<g>
<g>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="303.9668" y1="-148.2705" x2="306.9033" y2="-148.2705" gradientTransform="matrix(0.9994 -0.0344 0.0344 0.9994 -206.4658 489.5508)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_7_)" d="M95.087,328.908c0,0-1.973,2.834-2.803,3.907"/>
</g>
</g>
<g>
<g>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="306.5762" y1="-142.6699" x2="309.25" y2="-142.6699" gradientTransform="matrix(0.9994 -0.0344 0.0344 0.9994 -206.4658 489.5508)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_8_)" d="M97.633,334.638c0,0-1.394,1.867-2.556,3.473"/>
</g>
</g>
</g>
<g opacity="0.5">
<g>
<g>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M401.402,192.453c0,0,5.561,19.633,25.666,25.221
c0,0,7.455-16.842-8.064-37.144c0,0-1.033-0.526-2.149,0.247c0,0-5.835-16.293-4.805-29.819c0,0,0.157-0.473-0.119-0.962
c-0.264-0.462-0.98-0.778-1.276,0.38c-0.026,0.15-3.469,12.983,2.237,30.124c0,0-30.535-58.277-40.283-62.801
c0,0-5.938,1.42,30.728,67.913c0,0-6.631-7.486-24.93-16.959c0,0-0.186-0.151-0.418-0.159c-0.398-0.016-1.183,0.694-0.614,1.231
c0,0,16.441,10.262,24.694,20.202C402.068,189.928,401.224,190.778,401.402,192.453z"/>
</g>
</g>
<g opacity="0.6">
<g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="953.6973" y1="377.5625" x2="991.5639" y2="264.5732" gradientTransform="matrix(0.6654 -0.7464 0.7464 0.6654 -486.2031 682.6807)">
<stop offset="0" style="stop-color:#E6E6E6"/>
<stop offset="1" style="stop-color:#B3B3B3"/>
</linearGradient>
<path fill="url(#SVGID_9_)" d="M401.402,192.453c0,0,5.561,19.633,25.666,25.221c0,0,7.455-16.842-8.064-37.144
c0,0-1.033-0.526-2.149,0.247c0,0-5.835-16.293-4.805-29.819c0,0,0.157-0.473-0.119-0.962c-0.264-0.462-0.98-0.778-1.276,0.38
c-0.026,0.15-3.469,12.983,2.237,30.124c0,0-30.535-58.277-40.283-62.801c0,0-5.938,1.42,30.728,67.913
c0,0-6.631-7.486-24.93-16.959c0,0-0.186-0.151-0.418-0.159c-0.398-0.016-1.183,0.694-0.614,1.231
c0,0,16.441,10.262,24.694,20.202C402.068,189.928,401.224,190.778,401.402,192.453z"/>
</g>
</g>
<g opacity="0.3">
<g>
<path fill="#FFFFFF" d="M425.7,215.14c0,0-14.56-3.708-22.296-22.943c0,0,0.781-0.533,1.692,0.28
c0.913,0.813,4.267,13.111,18.691,20.447c0,0-39.392-71.22-51.125-94.771c0,0,49.891,90.188,52.127,94.337
c0,0,3.646-10.902-6.959-27.3c0,0-1.18-1.598,0.398-2.279C418.229,182.911,431.048,200.884,425.7,215.14z"/>
</g>
</g>
</g>
</svg>
</article>
<article id="ping_ring" class="centre_relative">
<svg version="1.1" id="Ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="505px" height="505px" viewBox="0 0 355 355" enable-background="new 0 0 355 355" xml:space="preserve">
<g>
<g>
<path fill="none" stroke="#CCCCCC" stroke-miterlimit="10" d="M333.863,177.979c0,86.428-70.061,156.5-156.5,156.5
c-86.441,0-156.5-70.072-156.5-156.5c0-86.43,70.059-156.5,156.5-156.5C263.803,21.479,333.863,91.549,333.863,177.979z"/>
</g>
</g>
</svg>
</article>