Harshit Laddha
Reputation: 2124
How to animate svg group elements ( scale basically )
I am trying an svg example to hover over certain elements to expand/scale them. I dont know where i have gone wrong or missed something. Please help.
Here's the fiddle link - http://jsfiddle.net/hNrwE/ ( i dont know how to upload svg on fiddle so i am providing the svg code too here )
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#stage").load('flowchart3.svg',function(response){
$(this).addClass("svgLoaded");
if(!response){
// Error loading SVG!
// Make absolutely sure you are running this on a web server or localhost!
}
});
});
</script>
<style>
#stage {
width: 1024px;
height: 1386px;
}
#yellow,#yellowcircletext,#yellowcircle,#yellowdetails{
/*transform-origin*/
-webkit-transform-origin:506.5px 114.5px;
-moz-transform-origin:506.5px 114.5px;
-ms-transform-origin:506.5px 114.5px;
-o-transform-origin:506.5px 114.5px;
transform-origin:506.5px 114.5px;
}
#blue,#bluecircletext,#bluecircle,#bluedetails{
/*transform-origin*/
-webkit-transform-origin:458.75px 202.75px;
-moz-transform-origin:458.75px 202.75px;
-ms-transform-origin:458.75px 202.75px;
-o-transform-origin:458.75px 202.75px;
transform-origin:458.75px 202.75px;
}
#green,#greencircletext,#greencircle,#greendetails{
/*transform-origin*/
-webkit-transform-origin:593.734px 193.26px;
-moz-transform-origin:593.734px 193.26px;
-ms-transform-origin:593.734px 193.26px;
-o-transform-origin:593.734px 193.26px;
transform-origin:593.734px 193.26px;
}
#pink,#pinkcircletext,#pinkcircle,#pinkdetails{
/*transform-origin*/
-webkit-transform-origin:360.875px 313.469px;
-moz-transform-origin:360.875px 313.469px;
-ms-transform-origin:360.875px 313.469px;
-o-transform-origin:360.875px 313.469px;
transform-origin:360.875px 313.469px;
}
#orange,#orangecircletext,#orangecircle,#orangedetails{
/*transform-origin*/
-webkit-transform-origin:487px 329px;
-moz-transform-origin:487px 329px;
-ms-transform-origin:487px 329px;
-o-transform-origin:487px 329px;
transform-origin:487px 329px;
}
#yellow2,#yellow2circletext,#yellow2circle,#yellow2details{
/*transform-origin*/
-webkit-transform-origin:412px 424.75px;
-moz-transform-origin:412px 424.75px;
-ms-transform-origin:412px 424.75px;
-o-transform-origin:412px 424.75px;
transform-origin:412px 424.75px;
}
[id$=details]{
/*transform*/
-webkit-transform:scale(0, 0);
-moz-transform:scale(0, 0);
-ms-transform:scale(0, 0);
-o-transform:scale(0, 0);
transform:scale(0, 0);
}
#yellow2badge:hover [id$=details]{
/*transform*/
-webkit-transform:scale(2, 2);
-moz-transform:scale(2, 2);
-ms-transform:scale(2, 2);
-o-transform:scale(2, 2);
transform:scale(2, 2);
}
#yellow2badge:hover [id$=circletext]{
/*transform*/
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
[id$=badge], [id$=circletext], [id$=details]{
/*transition*/
-webkit-transition:transform 0.25s ease-in-out;
-moz-transition:transform 0.25s ease-in-out;
-o-transition:transform 0.25s ease-in-out;
transition:transform 0.25s ease-in-out;
}
</style>
<div class="cbody-full">
<div class="container">
<div id="benefits">
<div class="info">
<div id="stage"> <!-- Fallback Text Content can go here --> </div>
</div>
</div>
</div>
</div>
xml/svg code --
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="timeline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g id="yellow2badge">
<circle id="yellow2circle" fill="#FFEB01" cx="412" cy="424.75" r="89"/>
<text id="yellow2circletext" transform="matrix(1 0 0 1 352.875 424.75)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="28.8769">Preventive </tspan><tspan x="0" y="34.652" font-family="'MyriadPro-Regular'" font-size="28.8769">Care Plan</tspan></text>
<g id="yellowdetails_1_" display="none">
<text transform="matrix(1 0 0 1 286 382)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Care plan will have home</tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">visits, tests by lab partners</tspan><tspan x="0" y="60" font-family="'MyriadPro-Regular'" font-size="25">A periodic check-up regime </tspan><tspan x="0" y="90" font-family="'MyriadPro-Regular'" font-size="25">can be designed as per users</tspan><tspan x="0" y="120" font-family="'MyriadPro-Regular'" font-size="25">requirement</tspan></text>
</g>
</g>
<g id="orangebadge">
<circle id="orangecircle" fill="#FF8A00" cx="487" cy="329" r="75"/>
<text transform="matrix(1 0 0 1 341 293)" display="none"><tspan x="0" y="0" display="inline" font-family="'MyriadPro-Regular'" font-size="25">Based on Tests conducted or </tspan><tspan x="0" y="30" display="inline" font-family="'MyriadPro-Regular'" font-size="25">consultants report we provide</tspan><tspan x="0" y="60" display="inline" font-family="'MyriadPro-Regular'" font-size="25">a preventive health care plan </tspan><tspan x="0" y="90" display="inline" font-family="'MyriadPro-Regular'" font-size="25">for a year.</tspan></text>
<g id="orangedetails">
<text id="orangecircletext" transform="matrix(1 0 0 1 437 324)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Test Result</tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25"> Analysis</tspan></text>
</g>
</g>
<g id="pinkbadge">
<ellipse id="pinkcircle" fill="#F131C3" cx="360.875" cy="313.469" rx="74.875" ry="76.281"/>
<text id="pinkcircletext" transform="matrix(1 0 0 1 333.875 313.4688)" font-family="'MyriadPro-Regular'" font-size="25">Tests</text>
<g id="pinkdetails" display="none">
<text transform="matrix(1 0 0 1 209 258)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Consultant doctor is</tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">recommended to reguster</tspan><tspan x="0" y="60" font-family="'MyriadPro-Regular'" font-size="25">medical history of parents and </tspan><tspan x="0" y="90" font-family="'MyriadPro-Regular'" font-size="25">gives feedback if full body </tspan><tspan x="0" y="120" font-family="'MyriadPro-Regular'" font-size="25">checks required</tspan></text>
</g>
</g>
<g id="greenbadge">
<circle id="greencircle" fill="#B3E500" cx="610.102" cy="191.633" r="75.633"/>
<text id="greencircletext" transform="matrix(1 0 0 1 549.3242 191.6338)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="27.6982">Emergency</tspan><tspan x="0" y="33.238" font-family="'MyriadPro-Regular'" font-size="27.6982">contacts</tspan></text>
<g id="greendetails" display="none">
<text transform="matrix(1 0 0 1 487 177)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Emergency service number </tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">is given by us for nearby </tspan><tspan x="0" y="60" font-family="'MyriadPro-Regular'" font-size="25">healthcare facilities</tspan></text>
</g>
</g>
<g id="bluebadge">
<circle id="bluecircle" fill="#00B2FC" cx="458.75" cy="202.75" r="83.75"/>
<text id="bluecircletext" transform="matrix(1 0 0 1 398 221)" font-family="'MyriadPro-Regular'" font-size="28.72">Fill Details</text>
<g id="bluedetails" display="none">
<text transform="matrix(1 0 0 1 318 208.188)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Provide us with details about </tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">you and your parents.</tspan></text>
</g>
</g>
<g id="yellowbadge">
<circle id="yellowcircle" fill="#FFEB01" cx="506.5" cy="114.5" r="69.5"/>
<g id="yellowdetails" display="none">
<text transform="matrix(1 0 0 1 442 106)" display="inline"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="25">Sign up for </tspan><tspan x="0" y="30" font-family="'MyriadPro-Regular'" font-size="25">our services!</tspan></text>
</g>
<text id="yellowcircletext" transform="matrix(1 0 0 1 458.75 119)" font-family="'MyriadPro-Regular'" font-size="28.7167">Sign up.</text>
</g>
</svg>
Upvotes: 1
Views: 901
Answers (1)
Ian
Reputation: 13842
I think you've mainly just got the wrong Ids in the selectors, and then the transition slightly wrong, but I may be misunderstanding some aspect about what you are trying to do...
So, for example only looking at the bottom yellow circle, I've change to...
#yellow2badge:hover [id$="yellow2circle"] {
/*transform*/
-webkit-transform:scale(2, 2);
-moz-transform:scale(2, 2);
-ms-transform:scale(2, 2);
-o-transform:scale(2, 2);
transform:scale(2, 2);
}
#yellow2badge:hover [id$="circletext"]{
/*transform*/
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
[id$=badge], [id$=circletext], [id$=details],[id$=circle] {
/*transition*/
-webkit-transition:-webkit-transform 0.25s ease-in-out;
-moz-transition:-moz-transform 0.25s ease-in-out;
-o-transition:-o-transform 0.25s ease-in-out;
transition:transform 0.25s ease-in-out;
}
Note, I've added [id$=circle], and amended -webkit-transition to -webkit-transition:-webkit-transform. I've put a test example at http://svg.dabbles.info/so21364791.html hover over the bottom circle
I haven't done the whole lot (not sure what you wanted for the text), and you may find it needs tweaking for other browsers as well, but I'm hoping it should get you going.
Upvotes: 1
Related Questions
- SVG Scale group from his center
- Scale group inside svg by hovering over external html element
- Scale svg group without changing position
- Scaling an SVG with complex animation paths
- How can I animate a group of objects in SVG?
- Animating an SVG Group
- How to scale individual SVG elements with jQuery/Javascript?
- SVG animation scaling while keeping the group from moving on one end
- SVG: Scale one element of group from specified anchor point
- Having trouble animating a grouping in jQuery SVG