CSS / 悬停时的 SVG 缩放效果导致图像从其位置移动
CSS / SVG zoom effect on hover cause the image to move from it's position
我正在尝试为我的 SVG 图像创建一个简单的缩放效果，以便使用 CSS 在悬停时稍微缩放一点。不从其位置移动元素
使用transform: scale(value); 它适用于一张图片，但是当我将它应用到其他图片时，它们会开始从它的位置移动。
我曾尝试使用 transform-origin 来控制它，但这没有帮助。
存在问题的实例：
https://codepen.io/akamali/pen/ajVXjR
我希望有人能告诉我这里做错了什么。
你有很多地方做错了：
position: absolute 在 SVG 中没有意义。这是一个 HTML 属性.
您在 CSS 规则中应用的 transform 将覆盖 <g class="tooth-elm"> 元素已有的 transform。解决这个问题的最简单方法是有两个组（一个在另一个组中），这样每个组都有一个转换。 IE。变化
<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>
我正在尝试为我的 SVG 图像创建一个简单的缩放效果，以便使用 CSS 在悬停时稍微缩放一点。不从其位置移动元素
使用transform: scale(value); 它适用于一张图片，但是当我将它应用到其他图片时，它们会开始从它的位置移动。
我曾尝试使用 transform-origin 来控制它，但这没有帮助。
存在问题的实例：
https://codepen.io/akamali/pen/ajVXjR
我希望有人能告诉我这里做错了什么。
你有很多地方做错了：
position: absolute在 SVG 中没有意义。这是一个 HTML 属性.您在 CSS 规则中应用的
transform将覆盖<g class="tooth-elm">元素已有的transform。解决这个问题的最简单方法是有两个组（一个在另一个组中），这样每个组都有一个转换。 IE。变化<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>