SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Location
    Durham, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SVG Scripting Help Needed

    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.

    Code:
    <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>
    Last edited by ralph.m; Feb 12, 2014 at 06:48.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •