CSS SVG 上的 transform-origin 未按預期工作
[英]CSS transform-origin on SVG not working as expected
問題描述
我正在嘗試創建一個可點擊的 map。這個想法是點擊一個區域會啟動一個指向該特定區域的縮放 animation。 到目前為止，我設法計算出每個包含getBBox()區域的 SVG 矩形的中心。 這被可視化為一個紫色圓圈
現在我無法理解如何在特定坐標上進行縮放，根據我的想法，這些坐標與上一步中計算的相同。 每次單擊不同的<path>時，下面的代碼基本上都會更新<g id="italy" class="c">組元素的transform-origin樣式屬性。
問題是如何縮放 SVG 並以特定坐標為中心？ 或者如何縮放 SVG 並僅將具有特定 ID 的路徑居中？
.c { fill: rebeccapurple; transition: 1s; fill-opacity: 0.7; stroke: #000000; stroke-width: 0.4px; transform: scale(0.7); }.c-zoom{ transform: scale(2); }.d:hover { fill-opacity: 1; }.map-container{ position: relative; }
<html> <head> <title>test</title> <link rel="stylesheet" href="test2.css"> </head> <body> <div class="map-container" id="map"> <svg xmlns:mapsvg="http://mapsvg.com" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" mapsvg:geoViewBox="6.624486 47.092916 18.521301 35.490303" width="430" height="515" id="svg"> <g id="italy" class="c"> <circle id="circle" cx="121" cy="495" r="5"></circle> <path class="d" d="m 314.31021,228.18051 -1.17,3.09 0.23,4.13 -2.52,0.99 -0.54,2.1 -2.92,-0.36 0.19,-1.04 -0.8,-0.31 -0.69,-2.51 -2.72,1.13 0,-2.14 -2.27,-1.32 0,0 1.13,-1.56 -0.32,-3.75 -3.7,2.48 -1.66,0.04 0.28,3.6 0,0 0,0 0,0 1.21,2.22 -1.62,-0.01 -0.34,-0.82 -1.99,0.79 -1.01,3.47 -2.6,2.09 -0.2,2.17 0,0 -0.04,-0.03 0,0 -1.64,0.89 -2.03,-0.37 -0.83,1.97 -1.55,-2.31 -1.44,0.8 -1.41,-0.16 0,0 -1.72,0.9 -1.11,-1.27 0,0 -0.92,0.25 -1.46,-0.9 -1.06,0.42 0,0 -1.63,-1.05 -0.21,-0.97 0,0 -1.35,-0.18 -0.52,-1.29 -4.66,-0.21 -2,-2.41 -3.58,-2 0.27,-3.06 -1.82,-1.22 0.33,-1.63 -2.17,-2.08 0.25,-1.15 0.67,0.09 -0.2,-1.09 1.68,-0.64 0.43,-1.99 2.03,-2.19 0.34,-2.69 -5.47,1.1 -2.65,-0.36 1.45,-2.1 -0.19,-1.04 -2.6,-0.53 -1.03,1 -1.2,-0.26 -1.73,-1.97 -1.39,-0.38 -0.34,-2.14 -1.33,-1.2 -2.46,2.39 -2.49,0.26 -0.2,1.07 -2.28,2.07 -3.99,0.14 -0.11,0.94 2.93,1.7 0.25,1.08 -2.54,0.16 -3.09,-0.89 -3.34,1.45 -2.76,-0.32 -1.55,-1.15 0.62,-1.04 -0.4,-0.91 -4.86,5.46 -0.66,-0.3 0.32,-0.95 -0.68,-0.91 -2.28,-0.5 -4.97,-4.03 -5.57,-0.13 -1,1.23 0.07,1.35 -1.67,0.42 -3.42,-3.05 -0.24,-1.55 -1.74,-1.6 0.05,-1.38 -1.22,-0.67 -1.67,0.29 -2.95,-3.04 -1.6,-0.03 -2.19,-1.23 -2.38,1.19 -5.63,-5.95 -2.44,0.51 -4.28,-2.94 -1.13,-1.26 0.54,-2.62 -1.05,-0.21 -0.5,-1.24 -2.43,-0.87 -5.35,0.59 -3.41,5.37 -3.6,2.09 0,0 -1.42,-3.32 -2.7,-1.99 -1.05,0.65 -1.41,-0.87 -0.35,0.96 -2.78,0.27 -0.94,1.13 -0.26,-1.17 -1.65,0.39 1.54,-4.51 1.32,-0.21 0.48,-3.42 -0.86,-2.09 -3.23,-1.11 -0.79,-1.73 -2.44,1.79 -3.15,-2.55 -0.44,1.05 -2.1,-0.35 0.34,-0.84 -0.59,-0.63 -2.26,0.44 0,0 -0.03,-5.08 0.49,0.19 0,0 1.75,-0.11 -0.32,-2.02 1.31,2.51 3.23,-0.85 -0.71,-1.39 0.89,-1.04 -0.15,-1.22 -1.74,-0.93 -0.3,-1.1 3.85,-3.88 -1.07,-3.25 -0.97,-0.82 -0.73,0.4 -1.75,-1.61 1.25,-1.64 -0.6,-1.02 1.66,-0.42 1.37,-4.05 1.64,-1.75 -0.12,-2.18 2.05,-1.84 -0.11,-0.67 1.23,0.18 0.32,-0.81 2.84,-0.72 1.57,1.86 1.13,-1.03 -0.63,-2.73 0.73,-0.12 1.6,2.14 1.28,-0.54 0.65,-1.91 0.92,1.25 -0.15,2.5 4.18,1.79 1.62,-1.42 0.5,-1.01 -0.75,-1.09 0.87,-0.27 0.83,1.54 1.85,0.95 0.37,1.86 0.93,-3.21 1,0.03 1.01,1.48 0.88,-0.39 0.2,-1.16 -1.13,-1.59 1.8,-1.46 0.73,0.61 -0.38,2.19 2.88,-2.21 0.89,0.09 1.88,2.45 -0.44,1.49 1.52,1.23 0.07,1.22 1.49,-0.35 0.8,1.74 3.33,-1.56 0.53,0.93 2.22,-0.06 3,2.37 1.6,0.04 2.83,2.27 2.45,-1.34 1.47,2.92 4.57,2.23 3.94,-0.17 1.45,-0.84 2.86,-4.12 0.45,1.62 1.8,-2.07 0.97,3.12 4.41,0.72 0.75,0.79 0.88,-0.16 0.08,0.75 1.34,-0.17 -0.2,0.58 1.46,-0.9 1.35,0.22 0.23,-1.15 2.32,-1.19 3.12,0.26 0.93,-0.79 2.65,0.64 1.22,1.55 0.55,-0.65 3.89,-0.31 0.36,-0.66 1.48,1.05 1.67,-1.59 6.23,0.92 0,0 0.16,1.49 5.7,-0.37 2.1,1.41 0.43,1.62 0.71,0.25 1.24,-0.12 2.02,-1.9 3.19,-0.89 0.74,-2.22 2.92,-1.36 6.27,0.08 2.21,-0.78 6.7,1.07 2.29,3.08 1.48,-0.97 0.81,1.05 2.15,0.17 1.46,-1.29 1.08,-0.01 0.83,1.08 -0.63,1.24 0.33,2.89 0.64,0.95 1.99,0.51 0.6,2.18 0,0 -0.65,0.17 -1.19,-1.84 -1.19,-0.36 -1.73,2.28 1.26,-0.5 -1.66,4.37 -0.59,4.98 0.48,3.31 1.96,3.83 -0.11,8.84 1.77,4.76 0.21,3.39 2.05,7.15 1.76,3.53 6.71,7.82 2.52,1.69 5.97,6.43 2.79,1.02 zm -29.42,11.31 -0.27,1.13 1.37,1.59 2.18,-1.12 -0.3,-1.1 0,0 -0.21,-0.47 -2.77,-0.03 z" title="Emilia-Romagna" id="IT-45" /> <path class="d" d="m 165.81021,222.60051 -0.4,0.99 -0.62,-0.99 1.02,0 zm -109.83,-1.17 0.79,0.27 1.55,-1.67 -1.31,0.02 -0.91,-1.44 0.47,-1.54 1.94,-1.07 9,2.88 1.64,-0.87 1.96,0.69 0.44,-0.73 -0.56,-0.87 -1.31,-0.61 1.84,-1.52 1.53,1.02 1.42,-0.49 1.18,-1.54 -0.05,-1.94 -1.46,-1.28 0.73,-1.7 -0.86,-1.1 1.25,-1.23 -1.27,-1.31 0,-1 0.43,-0.54 1.46,0.65 0.3,-2.17 1.29,0.16 0.98,-1.61 -0.24,-1.99 3.19,-1.76 0.75,-1.93 -1.37,-3.28 1.38,-0.45 -0.04,-1.9 1.55,-1.24 0.98,1.53 1.85,0.19 3.08,2.61 1.31,-0.71 0.56,-2.2 0.81,-0.38 1.47,1.05 1.14,-1.71 0.35,0.86 3.2,-0.12 1,0.75 2.74,-3.03 -0.79,-0.91 1.23,-1.93 3.56,0.2 1.62,0.24 1.79,2.94 -0.3,0.9 0.86,-0.04 0.38,2.2 1.27,-0.46 -0.36,-1.48 1.74,-1.46 -0.02,-1.47 2.28,-0.29 0.88,1.18 1.44,-0.77 -0.3,-3.72 -1.44,-1.56 1.56,-1.26 0.64,-1.66 1.61,-0.24 0.72,1.02 2.28,-0.25 1.6,3.43 1.44,-0.29 1.46,0.85 -0.05,1.48 1.63,1.21 3.52,-1.46 -0.06,-1.46 0,0 2.26,-0.44 0.6,0.63 -0.34,0.84 2.1,0.35 0.44,-1.05 3.15,2.55 2.44,-1.79 0.79,1.73 3.23,1.11 0.86,2.09 -0.48,3.42 -1.32,0.21 -1.54,4.51 1.65,-0.39 0.26,1.17 0.94,-1.13 2.78,-0.27 0.35,-0.96 1.42,0.87 1.05,-0.65 2.7,1.99 1.42,3.32 0,0 1.32,-0.19 1.01,2.58 4.03,3.13 2.59,1.06 0.09,2.57 0.81,0.7 -0.43,2.73 2.08,-1.75 1.47,1.02 -0.75,0.06 -1.24,1.98 3.93,-0.13 0.2,2.36 0.94,1.39 -0.49,1.23 1.78,-1.5 2.37,1.47 -0.27,1.38 -2.22,2.55 0,0 -1.58,-0.27 -1.19,0.87 -2.95,-2.2 0.05,-0.92 -1.35,-0.01 -1.99,-2 -1.29,0.79 1.3,1.62 -0.24,0.59 0.75,-0.13 -1.05,1.4 -4.76,-3.11 -1.9,-2.46 -2.44,-1.28 -1.12,0.82 -1.35,-2.56 -2.04,-0.9 -0.91,-1.69 -2.12,-0.8 -0.93,-1.42 -2.36,-0.08 -1.4,-1.45 -0.66,0.47 -1.62,-2.79 -7.03,-3.96 -1.09,1.04 0.12,2.41 -3.64,-1.69 0.52,-1.78 -0.69,-0.96 -10.67,-2.7 -0.65,-1.06 -0.59,0.44 0.41,0.67 -4.54,-1.23 1.17,-0.21 -0.92,-0.37 -2.38,-0.11 0.27,0.52 -2.06,-0.48 -2.07,0.8 -1.53,1.47 -1.83,0.35 -1.47,1.54 -5.94,3.02 -0.77,1.01 0.7,-0.14 -3,2.75 0.76,1.01 -1.92,2.55 0.38,2.04 -8,4 -1.99,3.46 -0.27,3.34 -3.14,3.53 -0.22,1.41 0.74,1.36 -4.29,2.89 -0.91,1.67 -2.31,0.5 -4.2,2.75 -4.44,0.9 -1.44,1.21 -1.54,-0.46 -3.33,1.96 -1.81,-0.3 -1.53,1.59 -4.69,-1.07 -1.24,1.01 -1.02,-0.22 -2.15,-5.17 0.09,-1.54 0.75,-0.94 2.45,-0.75 0.38,-3.17 4.37,-2.29 0.79,-1.75 -0.25,-2.12 2.17,-0.93 0.29,-1.73 z" title="Liguria" id="IT-42" /> <path class="d" d="m 186.10021,35.650505 0.52,0.58 -0.91,1.44 0.26,1.12 2.07,0.38 0.48,1.55 2.24,0.59 0.66,-1.01 2.23,0.88 1.1,-0.48 1.91,1.48 0,0 1.15,2.7 3.77,0.3 2.64,1.77 1.03,1.36 -0.23,2.19 0.84,1.39 -1.49,1.56 -1.97,0.11 -2.58,2.55 2.64,1.27 0.6,2.02 -0.89,1.27 0.81,0.47 0.52,2.14 -2.28,4.16 1.07,1.59 -0.94,4.43 -3.33,4.07 0.36,1.9 -1.19,0.94 -0.57,1.83 0.05,1 1.74,0.32 -0.16,2.03 1.3,1.99 -0.91,2.1 0.52,4.31 2.25,0.95 -0.71,1.37 0.42,0.87 1.32,0.13 2.14,-1.33 1.98,-0.07 0.47,-2.15 4.01,-0.81 1.27,0.98 0.39,-0.86 3.97,0.77 0,0 -11.09,16.500005 1.13,11.75 -0.4,1.98 0.84,0.18 0.7,-0.81 2.46,1.13 -0.96,2.57 0.96,0.75 -1.3,0.98 1,1.49 -0.68,1.91 1.49,0.39 0.51,0.99 2.41,-2 1.96,1.93 1.12,2.35 2.64,0.59 0.11,0.68 1.83,0.48 -0.1,1.3 2.87,1.3 0.8,1.22 -0.38,1.71 1.61,-0.32 0.87,0.55 -0.96,1.88 2.32,1.95 1.2,0.22 0.24,-1.27 1.36,0.73 0.93,-1.68 3,1.12 -1.27,1.02 0.41,1.01 -0.59,1.62 3.13,1.16 1.43,-0.85 0.01,2.46 7.98,4.28 0.23,1.03 0,0 -6.23,-0.92 -1.67,1.59 -1.48,-1.05 -0.36,0.66 -3.89,0.31 -0.55,0.65 -1.22,-1.54 -2.65,-0.64 -0.93,0.79 -3.12,-0.26 -2.32,1.19 -0.23,1.16 -1.35,-0.22 -1.46,0.9 0.2,-0.58 -1.34,0.17 -0.08,-0.75 -0.88,0.16 -0.75,-0.79 -4.41,-0.71 -0.97,-3.12 -1.8,2.07 -0.45,-1.62 -2.85,4.12 -1.45,0.84 -3.94,0.17 -4.57,-2.23 -1.47,-2.92 -2.45,1.34 -2.83,-2.27 -1.6,-0.04 -3,-2.37 -2.22,0.07 -0.53,-0.92 -3.33,1.56 -0.79,-1.73 -1.49,0.35 -0.07,-1.22 -1.52,-1.23 0.44,-1.49 -1.88,-2.45 -0.89,-0.09 -2.88,2.22 0.38,-2.19 -0.73,-0.61 -1.8,1.46 1.13,1.59 -0.19,1.16 -0.88,0.39 -1.01,-1.48 -1,-0.03 -0.93,3.21 -0.37,-1.86 -1.85,-0.95 -0.82,-1.54 -0.87,0.27 0.75,1.09 -0.5,1.01 -1.62,1.42 -4.18,-1.79 0.15,-2.5 -0.92,-1.25 -0.65,1.91 -1.28,0.54 -1.6,-2.14 -0.73,0.12 0.63,2.73 -1.13,1.03 -1.57,-1.86 -2.83,0.72 -0.32,0.81 -1.23,-0.18 0.11,0.67 -2.04,1.84 0.12,2.18 -1.63,1.75 -1.37,4.05 -1.66,0.42 0.6,1.02 -1.25,1.64 1.75,1.61 0.73,-0.4 0.97,0.82 1.07,3.25 -3.85,3.88 0.3,1.1 1.74,0.93 0.15,1.22 -0.89,1.04 0.71,1.4 -3.23,0.86 -1.31,-2.51 0.32,2.02 -1.75,0.11 0,0 -0.37,-2.85 0.63,-2 -2.27,-1.68 -0.47,-2.93 -2.72,0.75 -0.45,-0.78 -1.46,-0.12 0.12,-0.94 -1.16,-1.17 0.94,-1.01 -0.73,-1.98 -1.02,0.12 -1.68,-1.49 -1.55,-2.55 0.24,-1.73 -0.73,-1.29 -0.47,-0.44 -1.32,0.62 -1.29,-1.75 -0.29,-3.2 -2.91,0.23 -1.62,1.61 -1.64,0.18 -0.25,1.03 -1.28,-0.17 -0.17,-1 -1.12,0.16 -0.39,-1.16 -0.46,1.76 -3.32,-1.92 -0.29,-3.52 -1.42,-1.3 0.35,-1.3 -1.12,-0.31 -0.59,-1.49 -1.43,-0.43 -0.55,-0.98 1.79,-2.57 -2.17,0.96 -0.5,-0.39 1.19,-0.43 -1.25,-1.17 0.94,-0.85 -0.57,-0.41 1.26,-0.16 -1.61,-0.53 -0.02,-0.49 0.97,0.13 -0.31,-1.77 -2.01,-1.04 0.73,-1.49 1.35,-0.46 -0.6,-1.79 1.5,-1.38 1.18,1 2.78,-0.11 0,0.91 1.13,0.74 0.49,2.55 1.47,-0.11 1.1,-0.59 0.56,-2.1 1.88,-1.2 -2.17,-2.32 1.51,0.28 1.17,-0.8 1.57,0.44 2.13,-1.08 -0.93,-2.79 -0.89,0.06 -1.15,-3.9 -3.51,-1.81 -1.29,-4.92 0.44,-1.71 -1.93,-1.64 -0.32,-1.26 1.52,0.31 -0.81,-1.84 0.37,-1 -2.03,-0.4 0.55,-2.66 -3.05,-0.91 -2.02,-3.820005 0.06,-1.49 2.08,-2.35 -1.28,-4.95 8.05,-8.76 -1.01,-4.55 0.63,-1.61 0,0 1.21,-1.33 0.85,1.4 1.26,0.65 1.22,-0.52 2.36,1.93 0.03,1.11 -1.05,0.63 -2.48,4.44 2.35,0.03 1.94,2.04 1.42,0.33 0.04,1.68 2.47,4.88 -1.75,2.63 2.32,-0.87 2.1,0.78 -0.34,1 2.33,0.08 0.74,-3.66 2.04,-2.17 -0.74,-0.1 -0.82,-1.6 -2.06,-0.54 -0.26,-2.26 -1.22,-0.7 1.89,-1.73 -1.13,-3.27 0.54,-1.04 3.03,-1.09 0.6,-1.63 -0.79,-2.42 2.42,-1.19 2.14,-2.44 1.06,-0.07 2.03,-4.69 1.46,-0.15 0.17,-2.39 2.34,-4.37 -0.11,-2.05 -1.08,-1.21 0.27,-3.23 -1.66,-2.08 1.34,-1.14 0.18,-2.89 4.4,-0.99 0.62,1.79 1.88,1.31 1.26,-2.4 1.45,-0.71 -0.24,1.46 -0.69,0.26 0.98,0.59 -0.12,7.65 1.89,0.63 1,3.01 1.52,1.82 0.46,-0.38 3.87,1.56 2.14,-1.21 1.8,0.76 1.41,-4.28 2.11,1.1 6.62,-3.38 0.96,1.1 1.39,-1 2.26,2.05 -0.77,2.15 1.04,0.67 -0.12,2.19 2.92,1.49 -0.53,2.56 1.22,0.85 1.1,-0.77 1.63,0.29 2.76,-2.36 -1.09,-2.62 -2.56,-2.99 0.13,-1.5 1.08,-0.69 0.52,-1.77 1.19,-0.24 0.21,-1.52 -0.9,-0.2 -0.36,-1.24 -3.12,0.55 -2.1,-1.73 0.7,-1.51 -0.57,-1.05 0.61,-3.01 -0.51,-1.49 2.88,-3.11 0.1,-2.17 1.41,0.38 3.03,-1.55 1.31,0.64 1.23,-1.24 0.47,1.16 z" title="Lombardia" id="IT-25" /> <path class="d" d="m 93.25021,47.140505 1.55,1.57 -0.62,1.52 0.74,1.97 -0.36,4.74 -1.95,2.55 1.5,2.49 -0.66,1.18 1.42,1.27 3.05,1 2.2,3.99 1.48,0.63 -0.31,1.06 0.76,1.38 1.81,-0.06 2.02,1.55 1.64,-0.13 0,0 -0.63,1.61 1.01,4.55 -8.05,8.76 1.28,4.96 -2.08,2.35 -0.06,1.5 2.02,3.820005 3.05,0.91 -0.55,2.65 2.03,0.4 -0.37,1 0.81,1.85 -1.53,-0.32 0.32,1.27 1.93,1.63 -0.44,1.71 1.29,4.92 3.51,1.81 1.15,3.9 0.89,-0.06 0.93,2.79 -2.13,1.08 -1.58,-0.43 -1.17,0.8 -1.51,-0.29 2.17,2.32 -1.88,1.2 -0.56,2.1 -1.1,0.59 -1.47,0.11 -0.49,-2.55 -1.13,-0.74 0.01,-0.91 -2.78,0.11 -1.19,-1 -1.49,1.38 0.6,1.79 -1.36,0.46 -0.72,1.49 2.01,1.04 0.31,1.77 -0.98,-0.13 0.02,0.48 1.62,0.53 -1.26,0.16 0.57,0.42 -0.95,0.85 1.25,1.17 -1.19,0.43 0.5,0.39 2.17,-0.96 -1.79,2.57 0.55,0.98 1.43,0.44 0.59,1.49 1.12,0.31 -0.36,1.3 1.43,1.29 0.29,3.53 3.31,1.91 0.46,-1.75 0.4,1.15 1.12,-0.16 0.18,1.01 1.28,0.16 0.25,-1.02 1.64,-0.18 1.62,-1.61 2.91,-0.24 0.29,3.21 1.29,1.75 1.32,-0.62 0.46,0.44 0.73,1.29 -0.24,1.73 1.55,2.55 1.68,1.49 1.02,-0.12 0.72,1.99 -0.94,1.01 1.16,1.17 -0.12,0.94 1.45,0.13 0.45,0.78 2.72,-0.75 0.47,2.93 2.27,1.68 -0.62,2 0.37,2.85 0,0 -0.5,-0.19 0.03,5.08 0,0 0.06,1.45 -3.52,1.47 -1.62,-1.21 0.05,-1.48 -1.46,-0.85 -1.44,0.29 -1.6,-3.43 -2.28,0.25 -0.72,-1.02 -1.61,0.24 -0.63,1.66 -1.57,1.26 1.44,1.56 0.3,3.72 -1.44,0.78 -0.87,-1.19 -2.28,0.3 0.03,1.47 -1.74,1.46 0.36,1.48 -1.27,0.47 -0.39,-2.2 -0.86,0.03 0.3,-0.9 -1.79,-2.94 -1.62,-0.23 -3.55,-0.21 -1.23,1.93 0.79,0.91 -2.74,3.04 -1,-0.75 -3.21,0.12 -0.34,-0.86 -1.14,1.71 -1.47,-1.04 -0.8,0.38 -0.56,2.2 -1.31,0.71 -3.08,-2.61 -1.85,-0.19 -0.98,-1.52 -1.55,1.24 0.04,1.89 -1.38,0.46 1.37,3.27 -0.75,1.93 -3.18,1.76 0.23,2 -0.98,1.61 -1.29,-0.16 -0.3,2.18 -1.46,-0.65 -0.42,0.54 0,1 1.27,1.31 -1.25,1.23 0.86,1.1 -0.74,1.71 1.46,1.27 0.05,1.94 -1.18,1.55 -1.42,0.49 -1.53,-1.02 -1.84,1.51 1.31,0.62 0.56,0.87 -0.43,0.73 -1.97,-0.69 -1.63,0.88 -9,-2.88 -1.94,1.08 -0.47,1.54 0.91,1.44 1.31,-0.02 -1.55,1.67 -0.8,-0.27 0,0 0.06,-1.49 -2.44,-3.29 0.9,-3.11 -2.48,-0.1 -0.88,1.91 -2.9,-0.48 -5.18,2.19 -1.55,-0.35 -0.32,1.3 -1.64,-0.93 -1.83,0.69 -0.72,-2.18 -3.26,0.38 -1.82,-2.21 -1.33,0.22 -1.55,-2.32 -1.32,-0.44 -0.95,0.52 -3.04,-2.06 -2.68,0.39 -1.26,-0.86 -0.62,-3.17 -1.95,-1.13 0.18,-1.02 -1.68,-1.55 -0.23,-1.34 -1.82,-0.83 0.28,-4.23 2.86,-0.56 -3.61,-3.63 -1.12,-3.63 1.13,-1.7 1.6,-0.17 1.18,-1.16 0.88,-3.18 0.93,-0.08 -0.98,-2.4 0.71,-1.73 1.29,-0.98 4.58,0.29 -0.48,-1.88 -1.85,-1.09 -0.55,-3.22 -1.06,-1.16 1.16,-2.47 -0.86,-1.14 -3.58,-1.65 -1.3,1.3 -2.4,-0.46 -3.0799999,-2.09 -0.16,-0.89 -2.53,-0.99 0.2,-2.08 -0.58,-0.35 1.08,-1.54 -1.4,-2.18 0.69,-0.55 -0.34,-1.16 -3.63,-0.41 -0.62,-3.75 -0.92,-0.26 -0.88000002,-2.19 2.38000002,-1.48 0.4,-1.08 3.17,0.18 1.31,-1.56 4.0799999,1.71 0.09,0.64 2.26,-0.69 0.01,-2.3 2.69,-0.1 0.42,-1.51 2.41,-2.12 1.29,0.21 1.23,-0.74 0.97,1.13 2.14,-2.62 0.73,0.1 0.53,-2.63 -1.27,-3.28 0.98,-0.18 0.41,-1.54 1.32,-0.69 0.01,-1.47 1.24,-1.8 -3.74,-2.01 -0.62,-2.45 0,0 1.77,-3.56 0.36,2.85 0.9,-0.68 3.07,1.07 2.39,-3.01 2.8,-0.07 1.88,-0.89 0.96,0.67 3.54,-2.84 0.93,-1.57 1.23,-0.39 1.85,0.47 2.08,-1.13 2.01,1.25 0.13,0.87 1.41,-0.66 1.97,1.3 2.32,-0.38 0.68,0.61 4.89,-3.47 2.64,-0.2 1.01,0.65 0.73,-3.04 1.2,-0.24 -1.82,-3.73 1.66,-2.83 -0.36,-1.2 -1.62,-0.600005 -1.71,-3.1 0.7,-5.05 -0.7,-4.06 0,0 0.72,-0.68 0.1,-3.63 1.47,-1.58 4.15,0.12 1.11,-1.17 0.12,-1.52 1.16,-0.83 -0.67,-2.11 0.54,-1.99 3.72,-0.87 0.56,-1.43 1.91,-1 -0.12,-1.49 0.79,-1.14 -1.37,-3.28 -1.47,-1.81 -1.71,-0.8 3.19,-3.17 1.45,0.44 2.19,-0.87 0.74,-1.93 1.92,-0.85 0.03,-1.35 2.38,-0.99 0.47,-1.5 -1.45,-0.7 0.78,-1.24 1,-0.08 1.99,-1.92 z" title="Piemonte" id="IT-21" /> <path class="d" d="m 189.44021,341.50051 0.86,1.8 -0.76,0.73 -1.01,-0.17 -0.16,-2.15 1.07,-0.21 zm 29.33,-2.75 1.97,2.03 -0.22,3.02 -1.97,-2.44 -0.82,-0.13 1.04,-2.48 zm -41.31,-15.88 1.08,2.11 -0.65,1.48 -2.22,-0.98 1.43,-0.67 0.36,-1.94 zm 17.33,-17.27 1.33,1.4 -0.77,2.13 0.32,2.67 -2.52,1.36 2.45,1.7 -0.55,1.88 -2.47,-0.8 -0.92,-2.73 -0.77,-0.37 -1.22,0.24 0.07,1.67 -0.9,-1.6 -0.83,1.66 -2.23,-0.99 -0.22,1.65 -2.72,-0.74 -1.65,0.26 0.19,0.53 -1.81,-1.11 -1.03,-1.75 0.1,-1.58 1.84,-1.41 2.85,-0.07 2.54,1.55 0.17,-0.79 1.07,-0.28 -0.36,-0.57 0.65,-0.47 -0.61,-0.84 3.63,0.87 -0.76,0.97 1.9,0.34 2.67,-5.01 0.56,0.23 zm -30.08,-13.75 0.69,1.98 -1.83,2.42 -0.92,-1.33 0.51,-2.3 1.23,-1.3 0.32,0.53 zm 123.09,-52.03 0.08,0.16 0,0 0.3,1.1 -2.18,1.13 -1.37,-1.59 0.27,-1.12 2.77,0.02 0,0 0.13,0.3 zm -130.75,-39.65 3.6,-2.09 3.41,-5.36 5.35,-0.59 2.44,0.87 0.5,1.24 1.05,0.22 -0.54,2.63 1.13,1.26 4.28,2.94 2.44,-0.51 5.63,5.96 2.38,-1.19 2.19,1.23 1.6,0.03 2.95,3.04 1.67,-0.29 1.22,0.67 -0.05,1.38 1.74,1.6 0.24,1.55 3.42,3.05 1.67,-0.42 -0.07,-1.34 1,-1.23 5.57,0.13 4.97,4.03 2.28,0.51 0.68,0.91 -0.32,0.95 0.66,0.3 4.86,-5.46 0.4,0.91 -0.61,1.04 1.55,1.15 2.76,0.32 3.34,-1.45 3.09,0.89 2.54,-0.16 -0.25,-1.08 -2.93,-1.7 0.11,-0.94 3.99,-0.14 2.28,-2.07 0.2,-1.07 2.49,-0.26 2.46,-2.39 1.33,1.21 0.34,2.15 1.4,0.38 1.73,1.97 1.21,0.26 1.03,-1 2.6,0.53 0.2,1.04 -1.45,2.1 2.66,0.36 5.47,-1.1 -0.34,2.69 -2.03,2.19 -0.43,1.99 -1.68,0.64 0.2,1.09 -0.67,-0.09 -0.25,1.15 2.17,2.08 -0.33,1.63 1.82,1.22 -0.27,3.06 3.58,2 2,2.41 4.67,0.21 0.52,1.3 1.35,0.18 0,0 0.21,0.97 1.64,1.05 0,0 1.06,-0.42 1.46,0.9 0.92,-0.25 0,0 1.11,1.27 1.72,-0.9 0,0 1.42,0.16 1.44,-0.8 1.55,2.31 0.83,-1.97 2.04,0.38 1.64,-0.89 0,0 0.17,0.13 0,0 2.15,0.86 2.29,3.08 -2.1,0.02 0.3,2.18 -0.92,-0.06 -0.61,-3.72 -0.44,3.12 -1.23,0.66 -1.46,-0.28 0.2,0.81 -0.94,1.05 -2.31,0.83 1.45,2.23 0,0 -2.48,3.13 -0.77,2.59 -2.19,-0.18 -0.55,0.56 -0.17,1.76 2.61,1.48 -0.1,0.56 -2.13,0.9 -1.01,1.7 -1.09,-0.34 -1.71,1.74 0.33,1 2.14,-0.22 0.11,2.66 1.43,-0.54 0.65,0.6 1.01,2.29 -0.59,1.71 0.4,0.9 2.23,0.84 0.9,-2.23 1.54,1.26 -6.67,4.18 -2.2,-1.23 -0.82,0.37 0.5,1.33 -0.99,2.73 -5.18,3.05 -0.49,1.32 0.88,2.44 -0.33,1.22 0.79,1.57 0.84,-1.05 1.27,1.36 -2.42,9.85 1.09,0.75 0.15,1.81 -1.28,0.08 -1.95,2.34 0,0 -2.48,-0.14 -1.62,1.07 -0.51,2.01 -0.7,-1.32 -1.2,-0.47 -1.16,2.44 3.78,2.96 -1.04,2.36 -1.23,-0.01 0.41,2.62 1.05,0.48 0.08,1.08 -1.4,0.92 -1.37,-0.19 -0.91,2.14 -1.29,-0.25 -1.5,1.11 -0.2,1.08 -1.74,0.88 -0.81,-0.23 -0.67,0.89 -1.14,-1.05 -0.62,0.33 0.45,1.76 -1.37,1.94 2.79,1.91 0.09,3.43 -6.8,0.08 -1.85,4.15 0,0 -8.37,-1.95 -1.17,-0.95 -2.73,0.72 0.13,1.48 -0.99,0.48 -0.23,1.22 -1.82,0.15 -1.36,-1.7 -1.62,-0.51 -0.44,-2.58 0.98,-1.23 0.85,0.87 2.24,-0.19 1.01,-2.06 0.31,-3.12 -1.73,-3.57 -1.76,0.36 -0.98,-2.88 -1.1,-1.07 0.21,-0.98 -4.14,-1.77 -0.93,-3.72 -2.21,-2.29 -4.43,-1.78 -3.39,-0.4 -3.08,-2.02 1.84,-1.13 0.14,-3.65 0.89,-1.29 -0.66,-1.47 -1.79,-1.34 -3.2,-1.49 -2.86,-0.31 -3.73,0.58 -0.39,1.77 -2.31,-0.78 -0.59,-3.94 1.69,-0.8 1.12,-6.21 -0.66,-11.12 -1.17,-2.9 -2.16,-2.26 -1.83,-5.45 -1.08,-0.1 -1.15,-3.16 -2.62,-1.98 -1.62,-4.33 0.32,-2.36 -1.86,-7.72 0.6,-0.88 -0.25,-4.01 -1.84,-8.73 -5.04,-7.69 -4.12,-3.65 -2.16,-1.04 0,0 2.23,-2.54 0.27,-1.38 -2.37,-1.47 -1.78,1.5 0.49,-1.23 -0.94,-1.39 -0.19,-2.36 -3.93,0.14 1.24,-1.98 0.75,-0.06 -1.47,-1.02 -2.08,1.75 0.43,-2.73 -0.81,-0.7 -0.09,-2.57 -2.59,-1.06 -4.03,-3.13 -1.01,-2.58 -1.46,0.03 z" title="Toscana" id="IT-52" /> <path class="d" d="m 286.23021,0.7105053 1.73,1.36 -1.16,0.82 -0.54,2.17 -2.97,0.31 -1.32,1.27 0.85,3.7999997 1.6,1.52 -1.3,1.92 2.27,0.43 1.44,2.32 1.37,-1.07 1.76,0.41 1.58,3.22 -1.13,1.85 -0.06,2.32 3.62,0.65 1.37,4.26 5.04,2.91 0,0 -2.46,0.92 -1.67,1.87 -0.88,-0.2 0.38,1.33 -0.51,0.46 -1.26,0.06 -0.74,-0.89 -2.99,0.94 -1.21,-0.76 -3.34,2.65 -0.11,-2.26 -1.55,-0.98 -0.83,0.29 -3.93,-3.07 0.3,2.33 -1.51,2.68 0.17,1.49 -2.46,3.92 -0.58,-0.77 -1.16,0.06 -1.18,1.18 -1.57,-0.32 -4.87,2.46 -0.12,1.64 3.07,0.42 0.6,1.39 -2.3,2.72 -0.27,3.66 -0.81,-0.74 -2.36,1.43 2.91,2.44 0.58,1.4 -0.67,1.9 0.79,0.7 2.16,-0.5 0.44,1.94 0.64,-0.41 1.21,0.59 -0.79,1.97 2.43,2.22 -0.61,1.6 -1.1,-0.44 -1.71,3.95 -4.19,1.46 -2.23,-0.24 -0.75,0.78 -0.66,-0.77 -2.74,0.87 -0.01,2.02 0.93,1.53 -2.06,0.61 0.74,0.68 -0.73,0.81 1.14,2.02 -0.91,1.87 -4.21,-0.3 -0.54,-2.81 -1.89,-0.6 -2.15,0.29 -2.74,2.27 -3.62,-0.23 0.38,2.85 -1.29,0.16 -0.68,1.54 0.35,0.99 -2.48,-1.34 -0.07,-0.78 0.02,1.36 -2.42,-0.18 -0.86,4.91 -2.35,2.83 0.6,2.36 -1.55,-0.15 0.13,3.600005 -2.5,3.37 -1.6,-0.21 -1.93,-1.84 -1.64,0.88 -0.44,-1.17 -1.84,2.65 -0.49,-1.04 -1.5,1.69 -1.49,-0.93 0.65,-1.14 -2.05,-1.01 -2.19,-0.01 2.19,-4.030005 -0.78,-1.51 1.28,-1.1 -2.68,-1.66 0,0 -3.96,-0.77 -0.39,0.87 -1.27,-0.99 -4.01,0.81 -0.48,2.15 -1.97,0.06 -2.15,1.34 -1.32,-0.13 -0.41,-0.87 0.69,-1.39 -2.25,-0.96 -0.52,-4.31 0.91,-2.1 -1.3,-1.99 0.16,-2.03 -1.74,-0.32 -0.05,-1 0.57,-1.83 1.2,-0.95 -0.36,-1.9 3.33,-4.07 0.93,-4.42 -1.06,-1.59 2.27,-4.16 -0.51,-2.13 -0.81,-0.47 0.88,-1.27 -0.6,-2.02 -2.64,-1.27 2.59,-2.54 1.97,-0.12 1.49,-1.56 -0.84,-1.38 0.23,-2.2 -1.03,-1.36 -2.64,-1.77 -3.77,-0.3 -1.14,-2.69 0,0 1,-0.89 0.89,-5.07 -2.28,-2.08 -2.29,0.31 -0.84,-3.65 1.54,-1.91 -0.75,-1.75 2.19,-1.74 -1.22,-2.57 1.44,-0.8 1.46,-4.14 1.12,0.9 2.8,-0.2 -0.37,0.88 6.09,-2.84 1.36,0.77 -0.01,1.01 3.17,1.29 0.45,0.81 -1.75,2.64 1.34,0.23 1.63,-0.82 1.4,1.52 1.18,-0.49 2.48,1.45 1.66,-0.87 5.25,0.56 0.94,-2.86 2.29,-1.2 -0.62,-2.44 1.43,-2.62 -0.14,-1.8 0.9,-1.3 1.31,0.18 1.18,-0.88 0.14,-1.9499997 1.25,-0.37 0.92,0.6099997 5.77,-2.2299997 0.85,0.58 1.07,-0.47 2.39,1.95 1.87,-0.79 2,-2.72 2.93,2.12 4.2,-2.24 2.28,1.52 2.4,0.06 0.87,1.42 1.03,0.29 1.78,-1.65 2.79,-0.13 4.02,-3.1 1.61,-0.08 1.43,-1.15 2.23,0.19 1,-1.1 1.83,0.19 1.14,-1.44 1.07,0.39 3.38,-1.43 z" title="Trentino-Alto Adige" id="IT-32" /> <path class="d" d="m 49.07021,82.450505 0.58,1.17 3.82,-0.54 0.91,1.48 1.32,0.54 0.64,1.93 1.6,-1.15 2.47,1.61 1.17,-0.66 2.07,0.73 0,0 0.7,4.06 -0.7,5.05 1.71,3.1 1.62,0.600005 0.36,1.2 -1.66,2.83 1.82,3.73 -1.2,0.24 -0.73,3.04 -1.01,-0.65 -2.64,0.2 -4.89,3.47 -0.68,-0.61 -2.32,0.38 -1.97,-1.3 -1.41,0.66 -0.13,-0.87 -2.01,-1.25 -2.08,1.13 -1.85,-0.47 -1.23,0.39 -0.93,1.57 -3.54,2.84 -0.96,-0.67 -1.88,0.89 -2.8,0.07 -2.39,3.01 -3.07,-1.07 -0.9,0.68 -0.36,-2.85 -1.77,3.56 0,0 -2.72,-0.39 0.27,-1.63 -2.79,-0.76 -0.23,-5.06 -0.95,-1 1.17,-3.79 -1.74,-1.05 -2.6,0.18 -0.52,-1.45 -2.45,-0.92 -2.5199999,-2.91 0.3699999,-1.2 -0.7599999,-2.950005 1.0099999,-4.14 1.19,-0.34 0.99,0.64 0.73,-1.19 1.79,0.62 1.49,-0.47 0.53,-1.03 2.31,-0.81 0.32,-2.06 2.06,-1.74 3.16,4.8 2.57,-1.55 1.86,1.5 1.24,-2.11 2.13,-0.06 1.83,-2.42 4.72,1.84 4.45,-2.8 -0.04,-0.99 1.35,-1.05 2.22,0.42 0.3,-2.13 z" title="Valle d'Aosta" id="IT-23" /> <path class="d" d="m 303.90021,157.45051 -1.35,0.77 0.94,-1.05 -0.9,-0.37 1.6,-0.18 -0.29,0.83 zm -1.64,-2.1 1.19,0.9 -2.37,0.53 0.62,-1.75 0.56,0.32 zm -0.37,-124.080005 2.84,1.95 5.54,-0.56 2.07,0.74 0.89,1.09 0,0 -0.19,1.8 0.97,1.66 -0.7,2.27 0.88,1.16 -2.55,0.06 -3.46,2.18 -0.12,0.94 1.23,0.8 0.4,1.74 -1.82,-0.78 -1.04,0.79 -1.85,-0.79 -1.57,1.25 -0.41,-0.43 -1.48,2.04 -0.28,1.75 -2,1.76 0.32,1.39 -0.6,-0.27 0.18,0.6 -1.83,0.93 -0.33,2.02 -1.91,-0.27 -1.04,0.84 0.04,1.99 -1.8,1.89 2.12,2.85 2.08,-0.01 0.26,1.58 1.84,-0.1 0.3,2.13 2.42,1.95 -0.45,3.58 -2.9,1.96 -1.77,2.81 0.92,0.8 0.71,2.6 0.02,3.47 1.43,0.04 1.05,1.51 1.48,0.01 1.26,4.53 1.39,1.26 -0.21,1.2 2,1.05 0.68,-1.6 1.24,0.66 0.12,0.9 1.12,0.52 0.05,1.62 3.88,-3.59 0.67,0.68 1.98,-2.1 1.13,0.84 -0.43,1 0.63,0.73 0.55,-1.04 2.17,-1.08 0.64,0.07 -0.4,1.1 1.25,1.14 1.52,-0.94 0.49,1.09 1.55,-0.5 -0.45,-1.41 0.59,-0.24 0.58,1.58 -0.04,0.31 0.4,0.37 -0.17,0.82 0.82,0.35 -1.09,0.64 2.03,1.93 -0.49,0.26 0.65,1.300005 -0.35,1.17 0.97,-0.71 0.57,2.67 0.79,0.2 -0.37,0.8 1.01,0.81 -0.17,1.32 0.98,-0.12 -0.12,0.61 1.07,0.6 0,0 -0.56,0.77 -4.92,0.34 0.09,-0.75 -0.91,-0.35 -0.48,1.36 -3,0.39 -0.95,1.29 -6.26,3.91 -15.92,7.41 -1.53,1.97 -1.67,-0.84 -1.92,2.58 -1.44,2.81 -0.1,1.08 0.83,0.39 -1.08,0.4 -1.56,6.49 1.36,0.42 -1.08,1.07 0.57,2.52 1.28,1.45 -0.29,5.3 1.44,1.22 1.58,3.1 -0.51,-0.34 -0.8,0.95 0.91,0.56 0.86,-0.63 -0.24,1.11 0.51,0.14 0.55,-0.31 -0.44,-1.76 0.49,0.03 4.3,5.37 -0.66,4.47 -1.07,0.98 0.04,2.85 -1.6,-0.55 0.34,-2.86 -1.02,-0.44 -0.92,0.38 -0.75,1.72 0.87,1.09 -0.38,2.07 0.78,0.66 0.65,-0.45 0.06,0.72 -1.32,-0.13 -0.11,1.44 -2.41,-1.92 0,0 -0.6,-2.18 -1.99,-0.51 -0.64,-0.95 -0.33,-2.89 0.63,-1.24 -0.83,-1.08 -1.08,0.01 -1.46,1.29 -2.15,-0.17 -0.81,-1.05 -1.48,0.97 -2.29,-3.08 -6.7,-1.07 -2.2,0.78 -6.27,-0.08 -2.92,1.36 -0.74,2.22 -3.19,0.9 -2.01,1.9 -1.24,0.12 -0.71,-0.24 -0.43,-1.62 -2.1,-1.41 -5.7,0.38 -0.16,-1.49 0,0 -0.23,-1.03 -7.98,-4.28 0,-2.46 -1.42,0.85 -3.13,-1.16 0.59,-1.62 -0.41,-1.01 1.27,-1.02 -3,-1.12 -0.93,1.68 -1.36,-0.73 -0.24,1.27 -1.2,-0.22 -2.32,-1.95 0.96,-1.88 -0.87,-0.55 -1.61,0.32 0.38,-1.71 -0.79,-1.22 -2.87,-1.3 0.1,-1.3 -1.82,-0.48 -0.11,-0.68 -2.64,-0.59 -1.12,-2.35 -1.96,-1.92 -2.41,2.01 -0.51,-0.99 -1.49,-0.38 0.68,-1.91 -0.99,-1.49 1.3,-0.97 -0.96,-0.75 0.96,-2.57 -2.46,-1.13 -0.7,0.81 -0.83,-0.18 0.41,-1.98 -1.13,-11.75 11.09,-16.500005 0,0 2.68,1.66 -1.28,1.1 0.77,1.52 -2.18,4.030005 2.18,0.01 2.05,1.02 -0.65,1.13 1.49,0.93 1.49,-1.69 0.49,1.05 1.85,-2.66 0.44,1.17 1.64,-0.88 1.93,1.84 1.6,0.21 2.5,-3.37 -0.13,-3.600005 1.55,0.15 -0.6,-2.37 2.35,-2.83 0.87,-4.9 2.42,0.18 -0.02,-1.36 0.07,0.78 2.48,1.34 -0.35,-0.98 0.68,-1.54 1.29,-0.16 -0.37,-2.84 3.62,0.23 2.74,-2.26 2.15,-0.29 1.89,0.6 0.54,2.81 4.21,0.3 0.91,-1.87 -1.14,-2.02 0.73,-0.8 -0.73,-0.68 2.06,-0.6 -0.93,-1.54 0.01,-2.02 2.74,-0.87 0.67,0.77 0.74,-0.77 2.24,0.24 4.18,-1.46 1.71,-3.95 1.1,0.44 0.6,-1.6 -2.42,-2.22 0.79,-1.97 -1.21,-0.58 -0.64,0.41 -0.44,-1.94 -2.16,0.5 -0.79,-0.7 0.68,-1.89 -0.58,-1.41 -2.92,-2.43 2.36,-1.44 0.81,0.74 0.27,-3.66 2.3,-2.71 -0.59,-1.39 -3.08,-0.42 0.12,-1.65 4.87,-2.46 1.57,0.33 1.17,-1.18 1.16,-0.07 0.58,0.77 2.47,-3.92 -0.17,-1.48 1.52,-2.69 -0.31,-2.33 3.94,3.08 0.83,-0.29 1.55,0.98 0.11,2.26 3.34,-2.65 1.21,0.76 2.98,-0.94 0.75,0.89 1.26,-0.06 0.51,-0.46 -0.38,-1.32 0.87,0.2 1.67,-1.88 2.47,-0.92 0,0 1.41,-0.09 z" title="V.neto" id="IT-34" /> </g> </svg> </div> <button id="btn" >Debug button</button> <script> window.addEventListener("load",function(){ let ita = document.getElementById("italy"); let btn = document.getElementById("btn"); let regions = document.getElementsByClassName("d") btn.addEventListener("click",(e)=>{ ita.classList.toggle("c-zoom") }) for(r of regions){ r.addEventListener("click",(e)=>{ let childPos = e.target.getBBox(); const x = childPos.x + childPos.width/2 const y = childPos.y + childPos.height/2 const fin = x + "px " + y + "px" console.log(fin) document.getElementById("circle").setAttribute("cx", x); document.getElementById("circle").setAttribute("cy", y); ita.style['transform-origin'] = fin; ita.classList.toggle("c-zoom") }) } },false) </script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2022-05-23 10:32:42
IMO 你在這里有三個主要問題。
縮放期間的“搖擺”是由於您在縮放的同時移動了
transform-origin。 您可以通過確保只有轉換受transition設置的影響來解決這個問題。transition: transform 1s;其次，因為元素已經有
scale(0.7)，當你用scale(2)替換它時，map 跳轉。 您可以通過將初始比例移動到父容器來解決這個問題。 但是對於下面的示例，我剛剛刪除了初始縮放。最后，我假設您真的想將該區域放大到屏幕中間。 當前方法的問題是您正在圍繞新的變換原點進行縮放。 所以該地區的中心保持原樣。 您可以通過調整計算出的變換原點來解決此問題，以便該區域在縮放時向屏幕中心移動。
window.addEventListener("load",function(){ let ita = document.getElementById("italy"); let btn = document.getElementById("btn"); let regions = document.getElementsByClassName("d"); let centreX = 215; let centreY = 257.5; btn.addEventListener("click",(e)=>{ ita.classList.toggle("c-zoom") }) for(r of regions){ r.addEventListener("click",(e)=>{ let childPos = e.target.getBBox(); const x = childPos.x + childPos.width/2 const y = childPos.y + childPos.height/2 // Calculate an origin offset that means that when scaled by "zoom", // the point x,y ends up at the centre of the SVG. const zoom = 2; const dx = (x - centreX) / (zoom - 1); const dy = (y - centreY) / (zoom - 1); const fin = (x + dx) + "px " + (y + dy) + "px" //console.log(fin) document.getElementById("circle").setAttribute("cx", x); document.getElementById("circle").setAttribute("cy", y); ita.style['transform-origin'] = fin; ita.classList.toggle("c-zoom") }) } },false)
.c { fill: rebeccapurple; transition: transform 1s; fill-opacity: 0.7; stroke: #000000; stroke-width: 0.4px; }.c-zoom{ transform: scale(2); }.d:hover { fill-opacity: 1; }.map-container{ position: relative; } svg { border: solid 1px black; }
<div class="map-container" id="map"> <svg xmlns:mapsvg="http://mapsvg.com" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" mapsvg:geoViewBox="6.624486 47.092916 18.521301 35.490303" width="430" height="515" id="svg"> <g id="italy" class="c"> <circle id="circle" cx="121" cy="495" r="5"></circle> <path class="d" d="m 314.31021,228.18051 -1.17,3.09 0.23,4.13 -2.52,0.99 -0.54,2.1 -2.92,-0.36 0.19,-1.04 -0.8,-0.31 -0.69,-2.51 -2.72,1.13 0,-2.14 -2.27,-1.32 0,0 1.13,-1.56 -0.32,-3.75 -3.7,2.48 -1.66,0.04 0.28,3.6 0,0 0,0 0,0 1.21,2.22 -1.62,-0.01 -0.34,-0.82 -1.99,0.79 -1.01,3.47 -2.6,2.09 -0.2,2.17 0,0 -0.04,-0.03 0,0 -1.64,0.89 -2.03,-0.37 -0.83,1.97 -1.55,-2.31 -1.44,0.8 -1.41,-0.16 0,0 -1.72,0.9 -1.11,-1.27 0,0 -0.92,0.25 -1.46,-0.9 -1.06,0.42 0,0 -1.63,-1.05 -0.21,-0.97 0,0 -1.35,-0.18 -0.52,-1.29 -4.66,-0.21 -2,-2.41 -3.58,-2 0.27,-3.06 -1.82,-1.22 0.33,-1.63 -2.17,-2.08 0.25,-1.15 0.67,0.09 -0.2,-1.09 1.68,-0.64 0.43,-1.99 2.03,-2.19 0.34,-2.69 -5.47,1.1 -2.65,-0.36 1.45,-2.1 -0.19,-1.04 -2.6,-0.53 -1.03,1 -1.2,-0.26 -1.73,-1.97 -1.39,-0.38 -0.34,-2.14 -1.33,-1.2 -2.46,2.39 -2.49,0.26 -0.2,1.07 -2.28,2.07 -3.99,0.14 -0.11,0.94 2.93,1.7 0.25,1.08 -2.54,0.16 -3.09,-0.89 -3.34,1.45 -2.76,-0.32 -1.55,-1.15 0.62,-1.04 -0.4,-0.91 -4.86,5.46 -0.66,-0.3 0.32,-0.95 -0.68,-0.91 -2.28,-0.5 -4.97,-4.03 -5.57,-0.13 -1,1.23 0.07,1.35 -1.67,0.42 -3.42,-3.05 -0.24,-1.55 -1.74,-1.6 0.05,-1.38 -1.22,-0.67 -1.67,0.29 -2.95,-3.04 -1.6,-0.03 -2.19,-1.23 -2.38,1.19 -5.63,-5.95 -2.44,0.51 -4.28,-2.94 -1.13,-1.26 0.54,-2.62 -1.05,-0.21 -0.5,-1.24 -2.43,-0.87 -5.35,0.59 -3.41,5.37 -3.6,2.09 0,0 -1.42,-3.32 -2.7,-1.99 -1.05,0.65 -1.41,-0.87 -0.35,0.96 -2.78,0.27 -0.94,1.13 -0.26,-1.17 -1.65,0.39 1.54,-4.51 1.32,-0.21 0.48,-3.42 -0.86,-2.09 -3.23,-1.11 -0.79,-1.73 -2.44,1.79 -3.15,-2.55 -0.44,1.05 -2.1,-0.35 0.34,-0.84 -0.59,-0.63 -2.26,0.44 0,0 -0.03,-5.08 0.49,0.19 0,0 1.75,-0.11 -0.32,-2.02 1.31,2.51 3.23,-0.85 -0.71,-1.39 0.89,-1.04 -0.15,-1.22 -1.74,-0.93 -0.3,-1.1 3.85,-3.88 -1.07,-3.25 -0.97,-0.82 -0.73,0.4 -1.75,-1.61 1.25,-1.64 -0.6,-1.02 1.66,-0.42 1.37,-4.05 1.64,-1.75 -0.12,-2.18 2.05,-1.84 -0.11,-0.67 1.23,0.18 0.32,-0.81 2.84,-0.72 1.57,1.86 1.13,-1.03 -0.63,-2.73 0.73,-0.12 1.6,2.14 1.28,-0.54 0.65,-1.91 0.92,1.25 -0.15,2.5 4.18,1.79 1.62,-1.42 0.5,-1.01 -0.75,-1.09 0.87,-0.27 0.83,1.54 1.85,0.95 0.37,1.86 0.93,-3.21 1,0.03 1.01,1.48 0.88,-0.39 0.2,-1.16 -1.13,-1.59 1.8,-1.46 0.73,0.61 -0.38,2.19 2.88,-2.21 0.89,0.09 1.88,2.45 -0.44,1.49 1.52,1.23 0.07,1.22 1.49,-0.35 0.8,1.74 3.33,-1.56 0.53,0.93 2.22,-0.06 3,2.37 1.6,0.04 2.83,2.27 2.45,-1.34 1.47,2.92 4.57,2.23 3.94,-0.17 1.45,-0.84 2.86,-4.12 0.45,1.62 1.8,-2.07 0.97,3.12 4.41,0.72 0.75,0.79 0.88,-0.16 0.08,0.75 1.34,-0.17 -0.2,0.58 1.46,-0.9 1.35,0.22 0.23,-1.15 2.32,-1.19 3.12,0.26 0.93,-0.79 2.65,0.64 1.22,1.55 0.55,-0.65 3.89,-0.31 0.36,-0.66 1.48,1.05 1.67,-1.59 6.23,0.92 0,0 0.16,1.49 5.7,-0.37 2.1,1.41 0.43,1.62 0.71,0.25 1.24,-0.12 2.02,-1.9 3.19,-0.89 0.74,-2.22 2.92,-1.36 6.27,0.08 2.21,-0.78 6.7,1.07 2.29,3.08 1.48,-0.97 0.81,1.05 2.15,0.17 1.46,-1.29 1.08,-0.01 0.83,1.08 -0.63,1.24 0.33,2.89 0.64,0.95 1.99,0.51 0.6,2.18 0,0 -0.65,0.17 -1.19,-1.84 -1.19,-0.36 -1.73,2.28 1.26,-0.5 -1.66,4.37 -0.59,4.98 0.48,3.31 1.96,3.83 -0.11,8.84 1.77,4.76 0.21,3.39 2.05,7.15 1.76,3.53 6.71,7.82 2.52,1.69 5.97,6.43 2.79,1.02 zm -29.42,11.31 -0.27,1.13 1.37,1.59 2.18,-1.12 -0.3,-1.1 0,0 -0.21,-0.47 -2.77,-0.03 z" title="Emilia-Romagna" id="IT-45" /> <path class="d" d="m 165.81021,222.60051 -0.4,0.99 -0.62,-0.99 1.02,0 zm -109.83,-1.17 0.79,0.27 1.55,-1.67 -1.31,0.02 -0.91,-1.44 0.47,-1.54 1.94,-1.07 9,2.88 1.64,-0.87 1.96,0.69 0.44,-0.73 -0.56,-0.87 -1.31,-0.61 1.84,-1.52 1.53,1.02 1.42,-0.49 1.18,-1.54 -0.05,-1.94 -1.46,-1.28 0.73,-1.7 -0.86,-1.1 1.25,-1.23 -1.27,-1.31 0,-1 0.43,-0.54 1.46,0.65 0.3,-2.17 1.29,0.16 0.98,-1.61 -0.24,-1.99 3.19,-1.76 0.75,-1.93 -1.37,-3.28 1.38,-0.45 -0.04,-1.9 1.55,-1.24 0.98,1.53 1.85,0.19 3.08,2.61 1.31,-0.71 0.56,-2.2 0.81,-0.38 1.47,1.05 1.14,-1.71 0.35,0.86 3.2,-0.12 1,0.75 2.74,-3.03 -0.79,-0.91 1.23,-1.93 3.56,0.2 1.62,0.24 1.79,2.94 -0.3,0.9 0.86,-0.04 0.38,2.2 1.27,-0.46 -0.36,-1.48 1.74,-1.46 -0.02,-1.47 2.28,-0.29 0.88,1.18 1.44,-0.77 -0.3,-3.72 -1.44,-1.56 1.56,-1.26 0.64,-1.66 1.61,-0.24 0.72,1.02 2.28,-0.25 1.6,3.43 1.44,-0.29 1.46,0.85 -0.05,1.48 1.63,1.21 3.52,-1.46 -0.06,-1.46 0,0 2.26,-0.44 0.6,0.63 -0.34,0.84 2.1,0.35 0.44,-1.05 3.15,2.55 2.44,-1.79 0.79,1.73 3.23,1.11 0.86,2.09 -0.48,3.42 -1.32,0.21 -1.54,4.51 1.65,-0.39 0.26,1.17 0.94,-1.13 2.78,-0.27 0.35,-0.96 1.42,0.87 1.05,-0.65 2.7,1.99 1.42,3.32 0,0 1.32,-0.19 1.01,2.58 4.03,3.13 2.59,1.06 0.09,2.57 0.81,0.7 -0.43,2.73 2.08,-1.75 1.47,1.02 -0.75,0.06 -1.24,1.98 3.93,-0.13 0.2,2.36 0.94,1.39 -0.49,1.23 1.78,-1.5 2.37,1.47 -0.27,1.38 -2.22,2.55 0,0 -1.58,-0.27 -1.19,0.87 -2.95,-2.2 0.05,-0.92 -1.35,-0.01 -1.99,-2 -1.29,0.79 1.3,1.62 -0.24,0.59 0.75,-0.13 -1.05,1.4 -4.76,-3.11 -1.9,-2.46 -2.44,-1.28 -1.12,0.82 -1.35,-2.56 -2.04,-0.9 -0.91,-1.69 -2.12,-0.8 -0.93,-1.42 -2.36,-0.08 -1.4,-1.45 -0.66,0.47 -1.62,-2.79 -7.03,-3.96 -1.09,1.04 0.12,2.41 -3.64,-1.69 0.52,-1.78 -0.69,-0.96 -10.67,-2.7 -0.65,-1.06 -0.59,0.44 0.41,0.67 -4.54,-1.23 1.17,-0.21 -0.92,-0.37 -2.38,-0.11 0.27,0.52 -2.06,-0.48 -2.07,0.8 -1.53,1.47 -1.83,0.35 -1.47,1.54 -5.94,3.02 -0.77,1.01 0.7,-0.14 -3,2.75 0.76,1.01 -1.92,2.55 0.38,2.04 -8,4 -1.99,3.46 -0.27,3.34 -3.14,3.53 -0.22,1.41 0.74,1.36 -4.29,2.89 -0.91,1.67 -2.31,0.5 -4.2,2.75 -4.44,0.9 -1.44,1.21 -1.54,-0.46 -3.33,1.96 -1.81,-0.3 -1.53,1.59 -4.69,-1.07 -1.24,1.01 -1.02,-0.22 -2.15,-5.17 0.09,-1.54 0.75,-0.94 2.45,-0.75 0.38,-3.17 4.37,-2.29 0.79,-1.75 -0.25,-2.12 2.17,-0.93 0.29,-1.73 z" title="Liguria" id="IT-42" /> <path class="d" d="m 186.10021,35.650505 0.52,0.58 -0.91,1.44 0.26,1.12 2.07,0.38 0.48,1.55 2.24,0.59 0.66,-1.01 2.23,0.88 1.1,-0.48 1.91,1.48 0,0 1.15,2.7 3.77,0.3 2.64,1.77 1.03,1.36 -0.23,2.19 0.84,1.39 -1.49,1.56 -1.97,0.11 -2.58,2.55 2.64,1.27 0.6,2.02 -0.89,1.27 0.81,0.47 0.52,2.14 -2.28,4.16 1.07,1.59 -0.94,4.43 -3.33,4.07 0.36,1.9 -1.19,0.94 -0.57,1.83 0.05,1 1.74,0.32 -0.16,2.03 1.3,1.99 -0.91,2.1 0.52,4.31 2.25,0.95 -0.71,1.37 0.42,0.87 1.32,0.13 2.14,-1.33 1.98,-0.07 0.47,-2.15 4.01,-0.81 1.27,0.98 0.39,-0.86 3.97,0.77 0,0 -11.09,16.500005 1.13,11.75 -0.4,1.98 0.84,0.18 0.7,-0.81 2.46,1.13 -0.96,2.57 0.96,0.75 -1.3,0.98 1,1.49 -0.68,1.91 1.49,0.39 0.51,0.99 2.41,-2 1.96,1.93 1.12,2.35 2.64,0.59 0.11,0.68 1.83,0.48 -0.1,1.3 2.87,1.3 0.8,1.22 -0.38,1.71 1.61,-0.32 0.87,0.55 -0.96,1.88 2.32,1.95 1.2,0.22 0.24,-1.27 1.36,0.73 0.93,-1.68 3,1.12 -1.27,1.02 0.41,1.01 -0.59,1.62 3.13,1.16 1.43,-0.85 0.01,2.46 7.98,4.28 0.23,1.03 0,0 -6.23,-0.92 -1.67,1.59 -1.48,-1.05 -0.36,0.66 -3.89,0.31 -0.55,0.65 -1.22,-1.54 -2.65,-0.64 -0.93,0.79 -3.12,-0.26 -2.32,1.19 -0.23,1.16 -1.35,-0.22 -1.46,0.9 0.2,-0.58 -1.34,0.17 -0.08,-0.75 -0.88,0.16 -0.75,-0.79 -4.41,-0.71 -0.97,-3.12 -1.8,2.07 -0.45,-1.62 -2.85,4.12 -1.45,0.84 -3.94,0.17 -4.57,-2.23 -1.47,-2.92 -2.45,1.34 -2.83,-2.27 -1.6,-0.04 -3,-2.37 -2.22,0.07 -0.53,-0.92 -3.33,1.56 -0.79,-1.73 -1.49,0.35 -0.07,-1.22 -1.52,-1.23 0.44,-1.49 -1.88,-2.45 -0.89,-0.09 -2.88,2.22 0.38,-2.19 -0.73,-0.61 -1.8,1.46 1.13,1.59 -0.19,1.16 -0.88,0.39 -1.01,-1.48 -1,-0.03 -0.93,3.21 -0.37,-1.86 -1.85,-0.95 -0.82,-1.54 -0.87,0.27 0.75,1.09 -0.5,1.01 -1.62,1.42 -4.18,-1.79 0.15,-2.5 -0.92,-1.25 -0.65,1.91 -1.28,0.54 -1.6,-2.14 -0.73,0.12 0.63,2.73 -1.13,1.03 -1.57,-1.86 -2.83,0.72 -0.32,0.81 -1.23,-0.18 0.11,0.67 -2.04,1.84 0.12,2.18 -1.63,1.75 -1.37,4.05 -1.66,0.42 0.6,1.02 -1.25,1.64 1.75,1.61 0.73,-0.4 0.97,0.82 1.07,3.25 -3.85,3.88 0.3,1.1 1.74,0.93 0.15,1.22 -0.89,1.04 0.71,1.4 -3.23,0.86 -1.31,-2.51 0.32,2.02 -1.75,0.11 0,0 -0.37,-2.85 0.63,-2 -2.27,-1.68 -0.47,-2.93 -2.72,0.75 -0.45,-0.78 -1.46,-0.12 0.12,-0.94 -1.16,-1.17 0.94,-1.01 -0.73,-1.98 -1.02,0.12 -1.68,-1.49 -1.55,-2.55 0.24,-1.73 -0.73,-1.29 -0.47,-0.44 -1.32,0.62 -1.29,-1.75 -0.29,-3.2 -2.91,0.23 -1.62,1.61 -1.64,0.18 -0.25,1.03 -1.28,-0.17 -0.17,-1 -1.12,0.16 -0.39,-1.16 -0.46,1.76 -3.32,-1.92 -0.29,-3.52 -1.42,-1.3 0.35,-1.3 -1.12,-0.31 -0.59,-1.49 -1.43,-0.43 -0.55,-0.98 1.79,-2.57 -2.17,0.96 -0.5,-0.39 1.19,-0.43 -1.25,-1.17 0.94,-0.85 -0.57,-0.41 1.26,-0.16 -1.61,-0.53 -0.02,-0.49 0.97,0.13 -0.31,-1.77 -2.01,-1.04 0.73,-1.49 1.35,-0.46 -0.6,-1.79 1.5,-1.38 1.18,1 2.78,-0.11 0,0.91 1.13,0.74 0.49,2.55 1.47,-0.11 1.1,-0.59 0.56,-2.1 1.88,-1.2 -2.17,-2.32 1.51,0.28 1.17,-0.8 1.57,0.44 2.13,-1.08 -0.93,-2.79 -0.89,0.06 -1.15,-3.9 -3.51,-1.81 -1.29,-4.92 0.44,-1.71 -1.93,-1.64 -0.32,-1.26 1.52,0.31 -0.81,-1.84 0.37,-1 -2.03,-0.4 0.55,-2.66 -3.05,-0.91 -2.02,-3.820005 0.06,-1.49 2.08,-2.35 -1.28,-4.95 8.05,-8.76 -1.01,-4.55 0.63,-1.61 0,0 1.21,-1.33 0.85,1.4 1.26,0.65 1.22,-0.52 2.36,1.93 0.03,1.11 -1.05,0.63 -2.48,4.44 2.35,0.03 1.94,2.04 1.42,0.33 0.04,1.68 2.47,4.88 -1.75,2.63 2.32,-0.87 2.1,0.78 -0.34,1 2.33,0.08 0.74,-3.66 2.04,-2.17 -0.74,-0.1 -0.82,-1.6 -2.06,-0.54 -0.26,-2.26 -1.22,-0.7 1.89,-1.73 -1.13,-3.27 0.54,-1.04 3.03,-1.09 0.6,-1.63 -0.79,-2.42 2.42,-1.19 2.14,-2.44 1.06,-0.07 2.03,-4.69 1.46,-0.15 0.17,-2.39 2.34,-4.37 -0.11,-2.05 -1.08,-1.21 0.27,-3.23 -1.66,-2.08 1.34,-1.14 0.18,-2.89 4.4,-0.99 0.62,1.79 1.88,1.31 1.26,-2.4 1.45,-0.71 -0.24,1.46 -0.69,0.26 0.98,0.59 -0.12,7.65 1.89,0.63 1,3.01 1.52,1.82 0.46,-0.38 3.87,1.56 2.14,-1.21 1.8,0.76 1.41,-4.28 2.11,1.1 6.62,-3.38 0.96,1.1 1.39,-1 2.26,2.05 -0.77,2.15 1.04,0.67 -0.12,2.19 2.92,1.49 -0.53,2.56 1.22,0.85 1.1,-0.77 1.63,0.29 2.76,-2.36 -1.09,-2.62 -2.56,-2.99 0.13,-1.5 1.08,-0.69 0.52,-1.77 1.19,-0.24 0.21,-1.52 -0.9,-0.2 -0.36,-1.24 -3.12,0.55 -2.1,-1.73 0.7,-1.51 -0.57,-1.05 0.61,-3.01 -0.51,-1.49 2.88,-3.11 0.1,-2.17 1.41,0.38 3.03,-1.55 1.31,0.64 1.23,-1.24 0.47,1.16 z" title="Lombardia" id="IT-25" /> <path class="d" d="m 93.25021,47.140505 1.55,1.57 -0.62,1.52 0.74,1.97 -0.36,4.74 -1.95,2.55 1.5,2.49 -0.66,1.18 1.42,1.27 3.05,1 2.2,3.99 1.48,0.63 -0.31,1.06 0.76,1.38 1.81,-0.06 2.02,1.55 1.64,-0.13 0,0 -0.63,1.61 1.01,4.55 -8.05,8.76 1.28,4.96 -2.08,2.35 -0.06,1.5 2.02,3.820005 3.05,0.91 -0.55,2.65 2.03,0.4 -0.37,1 0.81,1.85 -1.53,-0.32 0.32,1.27 1.93,1.63 -0.44,1.71 1.29,4.92 3.51,1.81 1.15,3.9 0.89,-0.06 0.93,2.79 -2.13,1.08 -1.58,-0.43 -1.17,0.8 -1.51,-0.29 2.17,2.32 -1.88,1.2 -0.56,2.1 -1.1,0.59 -1.47,0.11 -0.49,-2.55 -1.13,-0.74 0.01,-0.91 -2.78,0.11 -1.19,-1 -1.49,1.38 0.6,1.79 -1.36,0.46 -0.72,1.49 2.01,1.04 0.31,1.77 -0.98,-0.13 0.02,0.48 1.62,0.53 -1.26,0.16 0.57,0.42 -0.95,0.85 1.25,1.17 -1.19,0.43 0.5,0.39 2.17,-0.96 -1.79,2.57 0.55,0.98 1.43,0.44 0.59,1.49 1.12,0.31 -0.36,1.3 1.43,1.29 0.29,3.53 3.31,1.91 0.46,-1.75 0.4,1.15 1.12,-0.16 0.18,1.01 1.28,0.16 0.25,-1.02 1.64,-0.18 1.62,-1.61 2.91,-0.24 0.29,3.21 1.29,1.75 1.32,-0.62 0.46,0.44 0.73,1.29 -0.24,1.73 1.55,2.55 1.68,1.49 1.02,-0.12 0.72,1.99 -0.94,1.01 1.16,1.17 -0.12,0.94 1.45,0.13 0.45,0.78 2.72,-0.75 0.47,2.93 2.27,1.68 -0.62,2 0.37,2.85 0,0 -0.5,-0.19 0.03,5.08 0,0 0.06,1.45 -3.52,1.47 -1.62,-1.21 0.05,-1.48 -1.46,-0.85 -1.44,0.29 -1.6,-3.43 -2.28,0.25 -0.72,-1.02 -1.61,0.24 -0.63,1.66 -1.57,1.26 1.44,1.56 0.3,3.72 -1.44,0.78 -0.87,-1.19 -2.28,0.3 0.03,1.47 -1.74,1.46 0.36,1.48 -1.27,0.47 -0.39,-2.2 -0.86,0.03 0.3,-0.9 -1.79,-2.94 -1.62,-0.23 -3.55,-0.21 -1.23,1.93 0.79,0.91 -2.74,3.04 -1,-0.75 -3.21,0.12 -0.34,-0.86 -1.14,1.71 -1.47,-1.04 -0.8,0.38 -0.56,2.2 -1.31,0.71 -3.08,-2.61 -1.85,-0.19 -0.98,-1.52 -1.55,1.24 0.04,1.89 -1.38,0.46 1.37,3.27 -0.75,1.93 -3.18,1.76 0.23,2 -0.98,1.61 -1.29,-0.16 -0.3,2.18 -1.46,-0.65 -0.42,0.54 0,1 1.27,1.31 -1.25,1.23 0.86,1.1 -0.74,1.71 1.46,1.27 0.05,1.94 -1.18,1.55 -1.42,0.49 -1.53,-1.02 -1.84,1.51 1.31,0.62 0.56,0.87 -0.43,0.73 -1.97,-0.69 -1.63,0.88 -9,-2.88 -1.94,1.08 -0.47,1.54 0.91,1.44 1.31,-0.02 -1.55,1.67 -0.8,-0.27 0,0 0.06,-1.49 -2.44,-3.29 0.9,-3.11 -2.48,-0.1 -0.88,1.91 -2.9,-0.48 -5.18,2.19 -1.55,-0.35 -0.32,1.3 -1.64,-0.93 -1.83,0.69 -0.72,-2.18 -3.26,0.38 -1.82,-2.21 -1.33,0.22 -1.55,-2.32 -1.32,-0.44 -0.95,0.52 -3.04,-2.06 -2.68,0.39 -1.26,-0.86 -0.62,-3.17 -1.95,-1.13 0.18,-1.02 -1.68,-1.55 -0.23,-1.34 -1.82,-0.83 0.28,-4.23 2.86,-0.56 -3.61,-3.63 -1.12,-3.63 1.13,-1.7 1.6,-0.17 1.18,-1.16 0.88,-3.18 0.93,-0.08 -0.98,-2.4 0.71,-1.73 1.29,-0.98 4.58,0.29 -0.48,-1.88 -1.85,-1.09 -0.55,-3.22 -1.06,-1.16 1.16,-2.47 -0.86,-1.14 -3.58,-1.65 -1.3,1.3 -2.4,-0.46 -3.0799999,-2.09 -0.16,-0.89 -2.53,-0.99 0.2,-2.08 -0.58,-0.35 1.08,-1.54 -1.4,-2.18 0.69,-0.55 -0.34,-1.16 -3.63,-0.41 -0.62,-3.75 -0.92,-0.26 -0.88000002,-2.19 2.38000002,-1.48 0.4,-1.08 3.17,0.18 1.31,-1.56 4.0799999,1.71 0.09,0.64 2.26,-0.69 0.01,-2.3 2.69,-0.1 0.42,-1.51 2.41,-2.12 1.29,0.21 1.23,-0.74 0.97,1.13 2.14,-2.62 0.73,0.1 0.53,-2.63 -1.27,-3.28 0.98,-0.18 0.41,-1.54 1.32,-0.69 0.01,-1.47 1.24,-1.8 -3.74,-2.01 -0.62,-2.45 0,0 1.77,-3.56 0.36,2.85 0.9,-0.68 3.07,1.07 2.39,-3.01 2.8,-0.07 1.88,-0.89 0.96,0.67 3.54,-2.84 0.93,-1.57 1.23,-0.39 1.85,0.47 2.08,-1.13 2.01,1.25 0.13,0.87 1.41,-0.66 1.97,1.3 2.32,-0.38 0.68,0.61 4.89,-3.47 2.64,-0.2 1.01,0.65 0.73,-3.04 1.2,-0.24 -1.82,-3.73 1.66,-2.83 -0.36,-1.2 -1.62,-0.600005 -1.71,-3.1 0.7,-5.05 -0.7,-4.06 0,0 0.72,-0.68 0.1,-3.63 1.47,-1.58 4.15,0.12 1.11,-1.17 0.12,-1.52 1.16,-0.83 -0.67,-2.11 0.54,-1.99 3.72,-0.87 0.56,-1.43 1.91,-1 -0.12,-1.49 0.79,-1.14 -1.37,-3.28 -1.47,-1.81 -1.71,-0.8 3.19,-3.17 1.45,0.44 2.19,-0.87 0.74,-1.93 1.92,-0.85 0.03,-1.35 2.38,-0.99 0.47,-1.5 -1.45,-0.7 0.78,-1.24 1,-0.08 1.99,-1.92 z" title="Piemonte" id="IT-21" /> <path class="d" d="m 189.44021,341.50051 0.86,1.8 -0.76,0.73 -1.01,-0.17 -0.16,-2.15 1.07,-0.21 zm 29.33,-2.75 1.97,2.03 -0.22,3.02 -1.97,-2.44 -0.82,-0.13 1.04,-2.48 zm -41.31,-15.88 1.08,2.11 -0.65,1.48 -2.22,-0.98 1.43,-0.67 0.36,-1.94 zm 17.33,-17.27 1.33,1.4 -0.77,2.13 0.32,2.67 -2.52,1.36 2.45,1.7 -0.55,1.88 -2.47,-0.8 -0.92,-2.73 -0.77,-0.37 -1.22,0.24 0.07,1.67 -0.9,-1.6 -0.83,1.66 -2.23,-0.99 -0.22,1.65 -2.72,-0.74 -1.65,0.26 0.19,0.53 -1.81,-1.11 -1.03,-1.75 0.1,-1.58 1.84,-1.41 2.85,-0.07 2.54,1.55 0.17,-0.79 1.07,-0.28 -0.36,-0.57 0.65,-0.47 -0.61,-0.84 3.63,0.87 -0.76,0.97 1.9,0.34 2.67,-5.01 0.56,0.23 zm -30.08,-13.75 0.69,1.98 -1.83,2.42 -0.92,-1.33 0.51,-2.3 1.23,-1.3 0.32,0.53 zm 123.09,-52.03 0.08,0.16 0,0 0.3,1.1 -2.18,1.13 -1.37,-1.59 0.27,-1.12 2.77,0.02 0,0 0.13,0.3 zm -130.75,-39.65 3.6,-2.09 3.41,-5.36 5.35,-0.59 2.44,0.87 0.5,1.24 1.05,0.22 -0.54,2.63 1.13,1.26 4.28,2.94 2.44,-0.51 5.63,5.96 2.38,-1.19 2.19,1.23 1.6,0.03 2.95,3.04 1.67,-0.29 1.22,0.67 -0.05,1.38 1.74,1.6 0.24,1.55 3.42,3.05 1.67,-0.42 -0.07,-1.34 1,-1.23 5.57,0.13 4.97,4.03 2.28,0.51 0.68,0.91 -0.32,0.95 0.66,0.3 4.86,-5.46 0.4,0.91 -0.61,1.04 1.55,1.15 2.76,0.32 3.34,-1.45 3.09,0.89 2.54,-0.16 -0.25,-1.08 -2.93,-1.7 0.11,-0.94 3.99,-0.14 2.28,-2.07 0.2,-1.07 2.49,-0.26 2.46,-2.39 1.33,1.21 0.34,2.15 1.4,0.38 1.73,1.97 1.21,0.26 1.03,-1 2.6,0.53 0.2,1.04 -1.45,2.1 2.66,0.36 5.47,-1.1 -0.34,2.69 -2.03,2.19 -0.43,1.99 -1.68,0.64 0.2,1.09 -0.67,-0.09 -0.25,1.15 2.17,2.08 -0.33,1.63 1.82,1.22 -0.27,3.06 3.58,2 2,2.41 4.67,0.21 0.52,1.3 1.35,0.18 0,0 0.21,0.97 1.64,1.05 0,0 1.06,-0.42 1.46,0.9 0.92,-0.25 0,0 1.11,1.27 1.72,-0.9 0,0 1.42,0.16 1.44,-0.8 1.55,2.31 0.83,-1.97 2.04,0.38 1.64,-0.89 0,0 0.17,0.13 0,0 2.15,0.86 2.29,3.08 -2.1,0.02 0.3,2.18 -0.92,-0.06 -0.61,-3.72 -0.44,3.12 -1.23,0.66 -1.46,-0.28 0.2,0.81 -0.94,1.05 -2.31,0.83 1.45,2.23 0,0 -2.48,3.13 -0.77,2.59 -2.19,-0.18 -0.55,0.56 -0.17,1.76 2.61,1.48 -0.1,0.56 -2.13,0.9 -1.01,1.7 -1.09,-0.34 -1.71,1.74 0.33,1 2.14,-0.22 0.11,2.66 1.43,-0.54 0.65,0.6 1.01,2.29 -0.59,1.71 0.4,0.9 2.23,0.84 0.9,-2.23 1.54,1.26 -6.67,4.18 -2.2,-1.23 -0.82,0.37 0.5,1.33 -0.99,2.73 -5.18,3.05 -0.49,1.32 0.88,2.44 -0.33,1.22 0.79,1.57 0.84,-1.05 1.27,1.36 -2.42,9.85 1.09,0.75 0.15,1.81 -1.28,0.08 -1.95,2.34 0,0 -2.48,-0.14 -1.62,1.07 -0.51,2.01 -0.7,-1.32 -1.2,-0.47 -1.16,2.44 3.78,2.96 -1.04,2.36 -1.23,-0.01 0.41,2.62 1.05,0.48 0.08,1.08 -1.4,0.92 -1.37,-0.19 -0.91,2.14 -1.29,-0.25 -1.5,1.11 -0.2,1.08 -1.74,0.88 -0.81,-0.23 -0.67,0.89 -1.14,-1.05 -0.62,0.33 0.45,1.76 -1.37,1.94 2.79,1.91 0.09,3.43 -6.8,0.08 -1.85,4.15 0,0 -8.37,-1.95 -1.17,-0.95 -2.73,0.72 0.13,1.48 -0.99,0.48 -0.23,1.22 -1.82,0.15 -1.36,-1.7 -1.62,-0.51 -0.44,-2.58 0.98,-1.23 0.85,0.87 2.24,-0.19 1.01,-2.06 0.31,-3.12 -1.73,-3.57 -1.76,0.36 -0.98,-2.88 -1.1,-1.07 0.21,-0.98 -4.14,-1.77 -0.93,-3.72 -2.21,-2.29 -4.43,-1.78 -3.39,-0.4 -3.08,-2.02 1.84,-1.13 0.14,-3.65 0.89,-1.29 -0.66,-1.47 -1.79,-1.34 -3.2,-1.49 -2.86,-0.31 -3.73,0.58 -0.39,1.77 -2.31,-0.78 -0.59,-3.94 1.69,-0.8 1.12,-6.21 -0.66,-11.12 -1.17,-2.9 -2.16,-2.26 -1.83,-5.45 -1.08,-0.1 -1.15,-3.16 -2.62,-1.98 -1.62,-4.33 0.32,-2.36 -1.86,-7.72 0.6,-0.88 -0.25,-4.01 -1.84,-8.73 -5.04,-7.69 -4.12,-3.65 -2.16,-1.04 0,0 2.23,-2.54 0.27,-1.38 -2.37,-1.47 -1.78,1.5 0.49,-1.23 -0.94,-1.39 -0.19,-2.36 -3.93,0.14 1.24,-1.98 0.75,-0.06 -1.47,-1.02 -2.08,1.75 0.43,-2.73 -0.81,-0.7 -0.09,-2.57 -2.59,-1.06 -4.03,-3.13 -1.01,-2.58 -1.46,0.03 z" title="Toscana" id="IT-52" /> <path class="d" d="m 286.23021,0.7105053 1.73,1.36 -1.16,0.82 -0.54,2.17 -2.97,0.31 -1.32,1.27 0.85,3.7999997 1.6,1.52 -1.3,1.92 2.27,0.43 1.44,2.32 1.37,-1.07 1.76,0.41 1.58,3.22 -1.13,1.85 -0.06,2.32 3.62,0.65 1.37,4.26 5.04,2.91 0,0 -2.46,0.92 -1.67,1.87 -0.88,-0.2 0.38,1.33 -0.51,0.46 -1.26,0.06 -0.74,-0.89 -2.99,0.94 -1.21,-0.76 -3.34,2.65 -0.11,-2.26 -1.55,-0.98 -0.83,0.29 -3.93,-3.07 0.3,2.33 -1.51,2.68 0.17,1.49 -2.46,3.92 -0.58,-0.77 -1.16,0.06 -1.18,1.18 -1.57,-0.32 -4.87,2.46 -0.12,1.64 3.07,0.42 0.6,1.39 -2.3,2.72 -0.27,3.66 -0.81,-0.74 -2.36,1.43 2.91,2.44 0.58,1.4 -0.67,1.9 0.79,0.7 2.16,-0.5 0.44,1.94 0.64,-0.41 1.21,0.59 -0.79,1.97 2.43,2.22 -0.61,1.6 -1.1,-0.44 -1.71,3.95 -4.19,1.46 -2.23,-0.24 -0.75,0.78 -0.66,-0.77 -2.74,0.87 -0.01,2.02 0.93,1.53 -2.06,0.61 0.74,0.68 -0.73,0.81 1.14,2.02 -0.91,1.87 -4.21,-0.3 -0.54,-2.81 -1.89,-0.6 -2.15,0.29 -2.74,2.27 -3.62,-0.23 0.38,2.85 -1.29,0.16 -0.68,1.54 0.35,0.99 -2.48,-1.34 -0.07,-0.78 0.02,1.36 -2.42,-0.18 -0.86,4.91 -2.35,2.83 0.6,2.36 -1.55,-0.15 0.13,3.600005 -2.5,3.37 -1.6,-0.21 -1.93,-1.84 -1.64,0.88 -0.44,-1.17 -1.84,2.65 -0.49,-1.04 -1.5,1.69 -1.49,-0.93 0.65,-1.14 -2.05,-1.01 -2.19,-0.01 2.19,-4.030005 -0.78,-1.51 1.28,-1.1 -2.68,-1.66 0,0 -3.96,-0.77 -0.39,0.87 -1.27,-0.99 -4.01,0.81 -0.48,2.15 -1.97,0.06 -2.15,1.34 -1.32,-0.13 -0.41,-0.87 0.69,-1.39 -2.25,-0.96 -0.52,-4.31 0.91,-2.1 -1.3,-1.99 0.16,-2.03 -1.74,-0.32 -0.05,-1 0.57,-1.83 1.2,-0.95 -0.36,-1.9 3.33,-4.07 0.93,-4.42 -1.06,-1.59 2.27,-4.16 -0.51,-2.13 -0.81,-0.47 0.88,-1.27 -0.6,-2.02 -2.64,-1.27 2.59,-2.54 1.97,-0.12 1.49,-1.56 -0.84,-1.38 0.23,-2.2 -1.03,-1.36 -2.64,-1.77 -3.77,-0.3 -1.14,-2.69 0,0 1,-0.89 0.89,-5.07 -2.28,-2.08 -2.29,0.31 -0.84,-3.65 1.54,-1.91 -0.75,-1.75 2.19,-1.74 -1.22,-2.57 1.44,-0.8 1.46,-4.14 1.12,0.9 2.8,-0.2 -0.37,0.88 6.09,-2.84 1.36,0.77 -0.01,1.01 3.17,1.29 0.45,0.81 -1.75,2.64 1.34,0.23 1.63,-0.82 1.4,1.52 1.18,-0.49 2.48,1.45 1.66,-0.87 5.25,0.56 0.94,-2.86 2.29,-1.2 -0.62,-2.44 1.43,-2.62 -0.14,-1.8 0.9,-1.3 1.31,0.18 1.18,-0.88 0.14,-1.9499997 1.25,-0.37 0.92,0.6099997 5.77,-2.2299997 0.85,0.58 1.07,-0.47 2.39,1.95 1.87,-0.79 2,-2.72 2.93,2.12 4.2,-2.24 2.28,1.52 2.4,0.06 0.87,1.42 1.03,0.29 1.78,-1.65 2.79,-0.13 4.02,-3.1 1.61,-0.08 1.43,-1.15 2.23,0.19 1,-1.1 1.83,0.19 1.14,-1.44 1.07,0.39 3.38,-1.43 z" title="Trentino-Alto Adige" id="IT-32" /> <path class="d" d="m 49.07021,82.450505 0.58,1.17 3.82,-0.54 0.91,1.48 1.32,0.54 0.64,1.93 1.6,-1.15 2.47,1.61 1.17,-0.66 2.07,0.73 0,0 0.7,4.06 -0.7,5.05 1.71,3.1 1.62,0.600005 0.36,1.2 -1.66,2.83 1.82,3.73 -1.2,0.24 -0.73,3.04 -1.01,-0.65 -2.64,0.2 -4.89,3.47 -0.68,-0.61 -2.32,0.38 -1.97,-1.3 -1.41,0.66 -0.13,-0.87 -2.01,-1.25 -2.08,1.13 -1.85,-0.47 -1.23,0.39 -0.93,1.57 -3.54,2.84 -0.96,-0.67 -1.88,0.89 -2.8,0.07 -2.39,3.01 -3.07,-1.07 -0.9,0.68 -0.36,-2.85 -1.77,3.56 0,0 -2.72,-0.39 0.27,-1.63 -2.79,-0.76 -0.23,-5.06 -0.95,-1 1.17,-3.79 -1.74,-1.05 -2.6,0.18 -0.52,-1.45 -2.45,-0.92 -2.5199999,-2.91 0.3699999,-1.2 -0.7599999,-2.950005 1.0099999,-4.14 1.19,-0.34 0.99,0.64 0.73,-1.19 1.79,0.62 1.49,-0.47 0.53,-1.03 2.31,-0.81 0.32,-2.06 2.06,-1.74 3.16,4.8 2.57,-1.55 1.86,1.5 1.24,-2.11 2.13,-0.06 1.83,-2.42 4.72,1.84 4.45,-2.8 -0.04,-0.99 1.35,-1.05 2.22,0.42 0.3,-2.13 z" title="Valle d'Aosta" id="IT-23" /> <path class="d" d="m 303.90021,157.45051 -1.35,0.77 0.94,-1.05 -0.9,-0.37 1.6,-0.18 -0.29,0.83 zm -1.64,-2.1 1.19,0.9 -2.37,0.53 0.62,-1.75 0.56,0.32 zm -0.37,-124.080005 2.84,1.95 5.54,-0.56 2.07,0.74 0.89,1.09 0,0 -0.19,1.8 0.97,1.66 -0.7,2.27 0.88,1.16 -2.55,0.06 -3.46,2.18 -0.12,0.94 1.23,0.8 0.4,1.74 -1.82,-0.78 -1.04,0.79 -1.85,-0.79 -1.57,1.25 -0.41,-0.43 -1.48,2.04 -0.28,1.75 -2,1.76 0.32,1.39 -0.6,-0.27 0.18,0.6 -1.83,0.93 -0.33,2.02 -1.91,-0.27 -1.04,0.84 0.04,1.99 -1.8,1.89 2.12,2.85 2.08,-0.01 0.26,1.58 1.84,-0.1 0.3,2.13 2.42,1.95 -0.45,3.58 -2.9,1.96 -1.77,2.81 0.92,0.8 0.71,2.6 0.02,3.47 1.43,0.04 1.05,1.51 1.48,0.01 1.26,4.53 1.39,1.26 -0.21,1.2 2,1.05 0.68,-1.6 1.24,0.66 0.12,0.9 1.12,0.52 0.05,1.62 3.88,-3.59 0.67,0.68 1.98,-2.1 1.13,0.84 -0.43,1 0.63,0.73 0.55,-1.04 2.17,-1.08 0.64,0.07 -0.4,1.1 1.25,1.14 1.52,-0.94 0.49,1.09 1.55,-0.5 -0.45,-1.41 0.59,-0.24 0.58,1.58 -0.04,0.31 0.4,0.37 -0.17,0.82 0.82,0.35 -1.09,0.64 2.03,1.93 -0.49,0.26 0.65,1.300005 -0.35,1.17 0.97,-0.71 0.57,2.67 0.79,0.2 -0.37,0.8 1.01,0.81 -0.17,1.32 0.98,-0.12 -0.12,0.61 1.07,0.6 0,0 -0.56,0.77 -4.92,0.34 0.09,-0.75 -0.91,-0.35 -0.48,1.36 -3,0.39 -0.95,1.29 -6.26,3.91 -15.92,7.41 -1.53,1.97 -1.67,-0.84 -1.92,2.58 -1.44,2.81 -0.1,1.08 0.83,0.39 -1.08,0.4 -1.56,6.49 1.36,0.42 -1.08,1.07 0.57,2.52 1.28,1.45 -0.29,5.3 1.44,1.22 1.58,3.1 -0.51,-0.34 -0.8,0.95 0.91,0.56 0.86,-0.63 -0.24,1.11 0.51,0.14 0.55,-0.31 -0.44,-1.76 0.49,0.03 4.3,5.37 -0.66,4.47 -1.07,0.98 0.04,2.85 -1.6,-0.55 0.34,-2.86 -1.02,-0.44 -0.92,0.38 -0.75,1.72 0.87,1.09 -0.38,2.07 0.78,0.66 0.65,-0.45 0.06,0.72 -1.32,-0.13 -0.11,1.44 -2.41,-1.92 0,0 -0.6,-2.18 -1.99,-0.51 -0.64,-0.95 -0.33,-2.89 0.63,-1.24 -0.83,-1.08 -1.08,0.01 -1.46,1.29 -2.15,-0.17 -0.81,-1.05 -1.48,0.97 -2.29,-3.08 -6.7,-1.07 -2.2,0.78 -6.27,-0.08 -2.92,1.36 -0.74,2.22 -3.19,0.9 -2.01,1.9 -1.24,0.12 -0.71,-0.24 -0.43,-1.62 -2.1,-1.41 -5.7,0.38 -0.16,-1.49 0,0 -0.23,-1.03 -7.98,-4.28 0,-2.46 -1.42,0.85 -3.13,-1.16 0.59,-1.62 -0.41,-1.01 1.27,-1.02 -3,-1.12 -0.93,1.68 -1.36,-0.73 -0.24,1.27 -1.2,-0.22 -2.32,-1.95 0.96,-1.88 -0.87,-0.55 -1.61,0.32 0.38,-1.71 -0.79,-1.22 -2.87,-1.3 0.1,-1.3 -1.82,-0.48 -0.11,-0.68 -2.64,-0.59 -1.12,-2.35 -1.96,-1.92 -2.41,2.01 -0.51,-0.99 -1.49,-0.38 0.68,-1.91 -0.99,-1.49 1.3,-0.97 -0.96,-0.75 0.96,-2.57 -2.46,-1.13 -0.7,0.81 -0.83,-0.18 0.41,-1.98 -1.13,-11.75 11.09,-16.500005 0,0 2.68,1.66 -1.28,1.1 0.77,1.52 -2.18,4.030005 2.18,0.01 2.05,1.02 -0.65,1.13 1.49,0.93 1.49,-1.69 0.49,1.05 1.85,-2.66 0.44,1.17 1.64,-0.88 1.93,1.84 1.6,0.21 2.5,-3.37 -0.13,-3.600005 1.55,0.15 -0.6,-2.37 2.35,-2.83 0.87,-4.9 2.42,0.18 -0.02,-1.36 0.07,0.78 2.48,1.34 -0.35,-0.98 0.68,-1.54 1.29,-0.16 -0.37,-2.84 3.62,0.23 2.74,-2.26 2.15,-0.29 1.89,0.6 0.54,2.81 4.21,0.3 0.91,-1.87 -1.14,-2.02 0.73,-0.8 -0.73,-0.68 2.06,-0.6 -0.93,-1.54 0.01,-2.02 2.74,-0.87 0.67,0.77 0.74,-0.77 2.24,0.24 4.18,-1.46 1.71,-3.95 1.1,0.44 0.6,-1.6 -2.42,-2.22 0.79,-1.97 -1.21,-0.58 -0.64,0.41 -0.44,-1.94 -2.16,0.5 -0.79,-0.7 0.68,-1.89 -0.58,-1.41 -2.92,-2.43 2.36,-1.44 0.81,0.74 0.27,-3.66 2.3,-2.71 -0.59,-1.39 -3.08,-0.42 0.12,-1.65 4.87,-2.46 1.57,0.33 1.17,-1.18 1.16,-0.07 0.58,0.77 2.47,-3.92 -0.17,-1.48 1.52,-2.69 -0.31,-2.33 3.94,3.08 0.83,-0.29 1.55,0.98 0.11,2.26 3.34,-2.65 1.21,0.76 2.98,-0.94 0.75,0.89 1.26,-0.06 0.51,-0.46 -0.38,-1.32 0.87,0.2 1.67,-1.88 2.47,-0.92 0,0 1.41,-0.09 z" title="V.neto" id="IT-34" /> </g> </svg> </div> <button id="btn" >Debug button</button>
解決方案2
0 2022-05-17 23:34:59
除非我誤解了問題，否則問題很可能來自動畫 svg 視圖框中的g元素。
因此，將transform-origin和 class 切換到整個 svg 上。 你可能需要添加一些 CSS 過渡，如果你 go 這條路線平滑 animation，像transition: all ease-in-out.2s; 在#svg和.c-zoom上
為什么 CSS transform-origin 和 transform 不能一起轉換？
[英]Why cannot CSS transform-origin and transform be transited together?
Safari 不支持 CSS 轉換原點，`transform-box: fill-box` 沒有幫助
[英]Safari not honoring CSS transform-origin, `transform-box: fill-box` not helping
在IE8中轉換對象（僅旋轉），類似於使用CSS3 transform（rotate），transform-origin
[英]transforming an object (rotation only) in IE8, similar to using CSS3 transform(rotate), transform-origin
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
CSS 變換原點不適用於 safari 中的 svg
CSS3-轉換來源不適用於d3.js中的SVG元素
Firefox SVG轉換來源仍然沒有固定？
為什么 transform-origin 屬性不起作用？
為什么 CSS transform-origin 和 transform 不能一起轉換？
在 CSS 中將 transform-origin 移回元素的中心
設置CSS3偽3d對象的轉換原點
Safari 不支持 CSS 轉換原點，`transform-box: fill-box` 沒有幫助
在IE8中轉換對象（僅旋轉），類似於使用CSS3 transform（rotate），transform-origin
在React Native中動畫化轉換原點
相關標簽