I'm trying to create a simple zoom effect for my SVG images to zoom a tiny bit on hover using CSS. without moving the elements from its position
using transform: scale(value); It works for one image, but when I apply it to other images, they will start moving from its position.
I have tried to control it using transform-origin but that didn't help.
Live example with the issue:
https://codepen.io/akamali/pen/ajVXjR
I hope someone can tell what I'm doing wrong here.
There are a number of things you are doing wrong:
position: absolute is meaningless in an SVG. It is an HTML property.
The transform you apply in your CSS rule will overwrite the transform that the <g class="tooth-elm"> element already has. The simplest way to fix this is to have two groups (one inside the other) so each has one of the transforms. Ie. change
<g class="tooth-elm" transform="...">
</// etc...>
</g>
to
<g transform="..."> <- existing transform to shift the tooth into position
<g class="tooth-elm"> <- element that will get scaled on hover
</// etc...>
</g>
</g>
The values in a transform-origin need to have units. Your 0.5 is being ignored by the browser.
The transition: all is affecting all the things that change (that will include the origin in your case). So you will get wierd effects. To fix that move those properties out of the animation rule.
You have two transition properties. And also a translateZ that is not needed.
The scale and the length of the transition are so long they are barely noticeable. So I have shortened them.
Here's a new version that works a bit better.
.container {
position:absolute;
top:200px;
left:600px;
right:0;
bottom:0;
}
.tooth-artboard {
position: relative;
overflow: hidden;
transition: transform .2s ease-in-out;
}
.tooth-elm
{
transition: 1s all;
transform-origin: 50% 50%;
transform-box: fill-box;
}
.tooth-elm:hover
{
transform: scale(1.1, 1.1);
}<div class="container">
<svg width="500px" height="500px" viewBox="0 0 203 224" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" class="tooth-artboard" transform="translate(-392.000000, -96.000000)">
<g id="lower" transform="translate(392.000000, 96.000000)">
<g id="lower-right">
<g id="2" transform="translate(52.000000, 0.000000)">
<g class="tooth-elm">
<g id="bg" fill="#FFFFFF">
<rect id="background" x="0" y="0" width="47" height="224"></rect>
</g>
<g id="bottom" transform="translate(8.000000, 72.000000)">
<use xlink:href="#root"/>
<use xlink:href="#tooth"/>
</g>
<g id="tooth-select" stroke="#75CAFA" stroke-width="1.5">
<rect id="Rectangle-2" x="0.75" y="0.75" width="45.5" height="222.5"></rect>
</g>
<g id="Number-Tag" transform="translate(13.000000, 192.000000)">
<ellipse id="Oval" stroke="#979797" stroke-width="0.2" fill="#EDEFF1" cx="10.789357" cy="11.0833333" rx="10.789357" ry="11.0833333"></ellipse>
<text id="2" font-family="Helvetica" font-size="7" font-weight="normal" fill="#9B9B9B">
<tspan x="9.24637145" y="13">2</tspan>
</text>
</g>
</g>
</g>
<g id="4" transform="translate(156.000000, 0.000000)">
<g class="tooth-elm">
<g id="bg" fill="#FFFFFF">
<rect id="background" x="0" y="0" width="47" height="224"></rect>
</g>
<g id="bottom" transform="translate(8.000000, 72.000000)">
<use xlink:href="#root"/>
<use xlink:href="#tooth"/>
</g>
<g id="tooth-select" stroke="#75CAFA" stroke-width="1.5">
<rect id="Rectangle-2" x="0.75" y="0.75" width="45.5" height="222.5"></rect>
</g>
<g id="Number-Tag" transform="translate(13.000000, 192.000000)">
<ellipse id="Oval" stroke="#979797" stroke-width="0.2" fill="#EDEFF1" cx="10.789357" cy="11.0833333" rx="10.789357" ry="11.0833333"></ellipse>
<text id="4" font-family="Helvetica" font-size="7" font-weight="normal" fill="#9B9B9B">
<tspan x="9.24637145" y="13">4</tspan>
</text>
</g>
</g>
</g>
<g id="3" transform="translate(104.000000, 0.000000)">
<g class="tooth-elm">
<g id="bg" fill="#FFFFFF">
<rect id="background" x="0" y="0" width="47" height="224"></rect>
</g>
<g id="bottom" transform="translate(8.000000, 72.000000)">
<use xlink:href="#root"/>
<use xlink:href="#tooth"/>
</g>
<g id="tooth-select" stroke="#75CAFA" stroke-width="1.5">
<rect id="Rectangle-2" x="0.75" y="0.75" width="45.5" height="222.5"></rect>
</g>
<g id="Number-Tag" transform="translate(13.000000, 192.000000)">
<ellipse id="Oval" stroke="#979797" stroke-width="0.2" fill="#EDEFF1" cx="10.789357" cy="11.0833333" rx="10.789357" ry="11.0833333"></ellipse>
<text id="3" font-family="Helvetica" font-size="7" font-weight="normal" fill="#9B9B9B">
<tspan x="9.24637145" y="13">3</tspan>
</text>
</g>
</g>
</g>
<g id="1">
<g class="tooth-elm">
<g id="bg" fill="#FFFFFF">
<rect id="background" x="0" y="0" width="47" height="224"></rect>
</g>
<g id="bottom" transform="translate(8.000000, 72.000000)">
<g id="root" transform="translate(6.000000, 32.000000)">
<path d="M16.9463099,3.43216798 L19.6736041,3.43216798 C18.5226998,10.2743839 17.7954442,15.3881751 17.4918374,18.7735416 C17.2285793,21.7089991 17.1003194,34.2858443 15.689777,54.5184683 C15.610894,55.6499552 15.599878,57.8099519 15.2565135,59.5737816 C15.0671842,60.5463471 14.6260245,61.9840358 13.9330342,63.8868478 L9.73806835,18.7735416 L15.2565135,2.87325118 L16.9463099,3.43216798 Z" id="Path-215" fill="#EDDFC4"></path>
<path d="M8.43793449,1.22053282 C10.7459437,1.34049469 12.4202909,1.52565591 13.4609761,1.77601648 C14.5016613,2.02637704 15.730729,2.56206287 17.1481791,3.38307394 C15.6499953,4.24212514 14.4209276,6.38784382 13.4609761,9.82022999 C12.0210488,14.9688092 11.129825,15.1845281 10.9135789,24.2981664 C10.7694148,30.3739252 11.3386883,37.3425329 12.6213993,45.2039894 L13.4609761,54.0361108 L13.8801637,62.1191189 L13.8801637,63.7776736 L13.4609761,64.4052534 L12.6213993,64.8824612 L10.5328425,52.9090077 L7.43545472,24.2981664 L8.43793449,1.22053282 Z" id="Path-214" fill="#DDCBAA"></path>
<path d="M8.57423054,1.16457248 L7.78984098,26.1744245 L11.4152314,57.1703292 L13.0469637,64.6918969 C12.7436064,64.749543 12.4713491,64.749543 12.2301919,64.6918969 C11.9890346,64.6342507 11.3851048,64.424807 10.4184024,64.063566 C9.10513636,61.5585767 8.22894924,59.4372662 7.78984098,57.6996344 C7.35073273,55.9620026 6.51792409,51.3205039 5.29141508,43.7751383 L2.34825009,24.6193713 C1.70321481,19.6692154 1.26796933,15.9281491 1.04251365,13.3961722 C0.817057966,10.8641954 0.617984278,7.48154928 0.445292585,3.24823397 L5.29141508,1.16457248 L8.57423054,1.16457248 Z" id="Path-213" fill="#C9B99D"></path>
<path d="M14.5144956,62.8322192 C16.3551525,56.5942388 15.7186831,46.0153561 16.7581666,32.8853986 C17.0379086,29.3519133 17.4319722,19.2635637 18.0880957,13.1365756 C18.5529871,8.79534417 19.6064682,5.34361769 19.8400728,3.41796025 C20.0555065,3.25805848 15.85524,0.662818252 10.9637481,0.179429036 C7.06002234,-0.206346704 6.13423158,0.30518544 2.24963746,1.67963033 C1.27773307,2.023509 0.336606006,0.777090941 0.358944696,3.41796025 C0.440467873,13.0555915 1.49441628,18.6067018 2.45736119,26.2366314 C3.09932447,31.3232512 4.31730556,38.9100393 6.11130447,48.9969957 L6.19508025,49.6607962 C7.44534693,55.9393326 8.4593297,59.9168655 9.23702857,61.5933948 C11.1754932,65.7722523 13.6166361,65.8750622 14.5144956,62.8322192 Z" id="Path-27" stroke="#979797" stroke-width="0.5"></path>
</g>
<g id="tooth">
<path d="M29.5715613,9.9722684 C30.1672149,11.1672177 30.3085077,12.0280117 29.9954397,12.5546505 C29.6823717,13.0812893 28.4111459,18.4775143 26.1817624,28.7433256 L26.9377813,32.9327598 C26.3458442,34.1485246 25.7995803,34.9337577 25.2989895,35.2884591 C24.7983987,35.6431606 24.0313904,35.5314232 22.9979644,34.9532471 C21.3512922,34.2513239 20.1045699,33.8039998 19.2577975,33.6112747 C18.4110251,33.4185497 16.992994,33.2593771 15.0037042,33.1337568 C14.4017292,30.8786755 14.0517925,29.064557 13.9538943,27.6914013 C13.8559961,26.3182456 13.8559961,23.2240258 13.9538943,18.4087417 C13.689285,14.5681465 13.6084452,11.7559888 13.7113747,9.9722684 C13.8143043,8.18854803 14.2450808,4.93647118 15.0037042,0.216037823 C16.7430294,0.813295377 18.043118,1.30722622 18.9039699,1.69783035 C19.7648218,2.08843449 21.4167163,3.00680743 23.8596534,4.45294918 C25.3502226,5.59920629 26.4481145,6.51305325 27.1533291,7.19449008 C27.8585437,7.8759269 28.6646211,8.801853 29.5715613,9.9722684 Z" id="Path-211" fill="#E9E9E9"></path>
<path d="M30.7660338,14.5410836 C29.8852156,11.5478559 29.0819442,10.0231402 28.3562195,9.96693645 C27.5982651,9.90823671 26.7389445,11.1688353 25.6901044,12.2673601 C24.3499047,13.6710467 23.8851684,15.6494969 23.3595668,17.1740464 C22.3820138,20.0095173 22.0789744,22.5025967 21.7772731,25.457656 C21.3133558,30.001564 21.7261035,32.9672893 23.3595668,35.0941639 C24.4485424,36.5120803 25.9646478,35.2951906 27.9078832,31.4434949 L30.7660338,20.5232714 L30.7660338,14.5410836 Z" id="Path-212" fill="#F9F9F9"></path>
<path d="M15.1184395,0.291219366 L14.1777004,9.91223869 L14.1777004,19.8011028 L14.1777004,27.2479477 L15.1184395,32.9779168 C13.4120176,33.052411 12.1056774,33.1887256 11.1994191,33.3868605 C10.2931607,33.5849954 8.76752409,34.0678348 6.62250917,34.8353788 L5.92122626,33.5931482 C5.0771678,31.8264244 4.48081377,30.5534261 4.13216418,29.7741534 C3.78351458,28.9948807 3.14117589,27.2821041 2.20514812,24.6358238 L0.955613667,16.6770422 C1.15983567,15.1572832 1.3515941,14.0626729 1.53088895,13.3932114 C1.7101838,12.7237498 2.09576389,11.6626598 2.68762921,10.2099413 C4.51876358,7.43265423 5.99464807,5.449915 7.11528269,4.26172363 C8.23591731,3.07353227 8.54316528,2.78960239 8.0370266,3.409934 C9.18193957,2.41724444 10.2360704,1.68743376 11.1994191,1.22050197 C12.1627677,0.753570179 13.4691079,0.44380931 15.1184395,0.291219366 Z" id="Path-210" fill="#D1D0D0"></path>
<path d="M25.5309985,35.1695903 C23.7636056,36.5286411 21.8664957,34.1553984 18.9001265,33.5453707 C17.5459653,33.2668903 15.0133873,33.1503101 11.3023924,33.19563 L6.6038999,35.0251 C4.07805614,30.9071602 2.37786703,26.4966235 1.50333257,21.7934899 C0.264850594,15.1330934 1.33806191,12.3383217 4.25465362,7.59490604 C6.76759647,3.50796704 10.3078268,0.99161223 14.8753446,0.0458416135 C21.4425703,2.26108036 26.2060582,5.37910775 29.1658083,9.3999238 C31.871415,13.0754865 29.9962653,31.7359881 25.5309985,35.1695903 Z" id="Path-26" stroke="#ADACAC" stroke-width="0.5"></path>
</g>
</g>
<g id="tooth-select" stroke="#75CAFA" stroke-width="1.5">
<rect id="Rectangle-2" x="0.75" y="0.75" width="45.5" height="222.5"></rect>
</g>
<g id="Number-Tag" transform="translate(13.000000, 192.000000)">
<ellipse id="Oval" stroke="#979797" stroke-width="0.2" fill="#EDEFF1" cx="10.789357" cy="11.0833333" rx="10.789357" ry="11.0833333"></ellipse>
<text id="1" font-family="Helvetica" font-size="7" font-weight="normal" fill="#9B9B9B">
<tspan x="9.24637145" y="13">1</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>