For a website, i'm looking to create a clickable svg (i would love to post an image but i apparently need credit for that - a shame - the svg image is posted in code belo), an image with a central circle and 7 circles surrounding it, where when i click on one of the surrounding circles an area with info appears on the left side and also that circle enlarges together with some other interdependent circles. Up til now i have no experience with animated svg but i'm eager to learn.
from what i read i assume i would embed the svg using the <object> tag but i need to make separate objects within the svg clickable. So i decided to use the <svg> with all the code inside so i can better control the elements within my html:
`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Laag_1" x="0px" y="0px" viewBox="0 0 282.7 273.8" enable-background="new 0 0 282.7 273.8" xml:space="preserve">
<g>
<circle fill="none" stroke="#07A2D3" stroke-miterlimit="10" stroke-dasharray="1.998,1.998" cx="141.7" cy="137.5" r="95.4"/>
<rect class="btn" x="0" y="0" width="100" height="100" onclick="function(){};" />
</g>
<circle fill="#07A2D3" cx="141.7" cy="137.5" r="48.3"/>
<circle fill="#B1DEEA" cx="141.7" cy="43.9" r="27.7"/>
<circle fill="#B1DEEA" cx="68.4" cy="79.3" r="27.7"/>
<circle fill="#B1DEEA" cx="50.5" cy="158.5" r="27.7"/>
<circle fill="#B1DEEA" cx="101.4" cy="221.9" r="27.7"/>
<circle fill="#B1DEEA" cx="182.7" cy="221.6" r="27.7"/>
<circle fill="#B1DEEA" cx="233" cy="157.7" r="27.7"/>
<circle fill="#B1DEEA" cx="214.4" cy="78.6" r="27.7"/>
<text transform="matrix(1 0 0 1 125.8164 134.4912)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">digital</tspan><tspan x="-10" y="14.4" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">revolution</tspan></text>
<text transform="matrix(1 0 0 1 126.6628 47.0657)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">mobility</text>
<text transform="matrix(1 0 0 1 204.0706 81.8103)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">cloud</text>
<text transform="matrix(1 0 0 1 218.6055 160.0701)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">big data</text>
<text transform="matrix(1 0 0 1 162.8337 214.0465)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">enterprise</tspan><tspan x="-2" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">application</tspan><tspan x="-1.9" y="21.6" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">integration</tspan></text>
<text transform="matrix(1 0 0 1 86.6699 216.3144)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">content</tspan><tspan x="-10.6" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">management</tspan></text>
<text transform="matrix(1 0 0 1 31.4218 155.9787)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">enterprise</tspan><tspan x="7.9" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">portal</tspan></text>
<text transform="matrix(1 0 0 1 60.4614 69.8347)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">user</tspan><tspan x="-12.7" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">experience</tspan><tspan x="-4.7" y="21.6" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">design</tspan></text>
</svg>
`
Just enclosing one of these objects with a <a>-link doesn't seem to work so i picked up on another method, in which to use a transparant button as an overlay, using <rect class="btn" x="0" y="0" width="100" height="100" /> (courtesy of RGB in this post: Making an svg image object clickable with onclick, avoiding absolute positioning)
Only problem i'm experiencing here is that i can't seem to get the tranparent button on top of my svg, not even when using a z-index of 9999.
I'm in the middle of trying things out but my question is this: for what i'm trying to achieve, is this according to you best practice or would you recommend looking in another direction? Bare in mind that i would like to use css animation on the svg objcets when clicked.
Thank you for your advice!
Have you checked Raphael Library? Seems ideal for what you´re trying to achieve http://raphaeljs.com/