我正在尝试为我的SVG图像创建一个简单的缩放效果，以使用CSS在悬停时进行一点缩放。而不从其位置移动元素
使用transform: scale(value);适用于一幅图像，但是当我将其应用于其他图像时，它们将从其位置开始移动。
我试图使用transform-origin控制它，但这没有帮助。
存在问题的实时示例：
https://codepen.io/akamali/pen/ajVXjR
我希望有人可以告诉我我在做什么错。
答案 0 :(得分：3)
您做错了很多事情：
position: absolute在SVG中毫无意义。这是HTML属性。
您在CSS规则中应用的transform将覆盖transform元素已经拥有的<g class="tooth-elm">。解决此问题的最简单方法是具有两个组（一个在另一个内部），因此每个都有一个转换。就是改变
<g class="tooth-elm" transform="...">
</// etc...>
</g>
到
<g transform="..."> <- existing transform to shift the tooth into position
<g class="tooth-elm"> <- element that will get scaled on hover
</// etc...>
</g>
</g>
transform-origin中的值必须具有单位。浏览器将忽略您的0.5。
transition: all正在影响所有变化的事物（将包括您案例中的原点）。这样您将获得怪异的效果。要解决此问题，可以将这些属性从动画规则中移出。
您有两个transition属性。还有一个不需要的translateZ。
过渡的规模和长度是如此之长，以至于几乎看不到。所以我把它们缩短了。
这是一个新版本，效果更好。
.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>