SVG组缩放变换问题：悬停偏移与原点设置咨询

1. scale变换的基准是什么？ #

CSS的scale变换默认以**变换原点（transform-origin）**为基准，默认值是50% 50%，也就是目标元素自身边界框的几何中心。

针对你这个SVG里的<g>元素：

• 该组已经通过SVG原生的transform="translate(264.313 121.836)"完成了全局定位，这个变换会先把组的局部坐标系移动到全局坐标系的(264.313, 121.836)位置。
• 你添加的CSS scale变换是叠加在SVG原生变换之后的，缩放基准点是该组自身局部坐标系内的边界框中心，既不是全局坐标系原点，也不是组内元素的位置参数（比如椭圆的cx/cy）——除非你手动修改transform-origin到对应位置。

2. 如何确保缩放围绕目标组的指定点进行？ #

要让缩放围绕你想要的点（比如灯头的视觉中心）进行，只需调整CSS的transform-origin到该点在组局部坐标系中的坐标即可：

具体步骤： #

1. 确定缩放中心：灯头组里的黄色椭圆是视觉核心，它在组局部坐标系中的坐标是cx="41.1"、cy="90.717"，这就是适合的缩放中心。
2. 在CSS的.interactive:hover规则中添加transform-origin，设置为该点的坐标。

修改后的代码 #

CSS部分

.interactive:hover {
  scale: 1.2;
  transform-origin: 41.1px 90.717px; /* 对应黄色椭圆的中心坐标 */
}

SVG部分（无需修改结构）

<svg viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <svg>
        <g fill="none" fill-rule="evenodd" transform="translate(0 .832)">
            <path fill="#FCFC30" fill-opacity=".35"
                  d="M283.589311,155.632129 L373.36705,522.838236 C377.564302,540.005704 367.049864,557.325232 349.882396,561.522484 C347.399779,562.129455 344.853386,562.436827 342.297648,562.438029 L162.3966,562.522631 C144.72349,562.530942 130.389866,548.210793 130.381555,530.537683 C130.380345,527.962942 130.689882,525.397465 131.303454,522.896901 L221.426762,155.606192 C225.638338,138.442233 242.966634,127.942251 260.130594,132.153828 C271.714734,134.996266 280.756541,144.04562 283.589311,155.632129 Z"
                  transform="rotate(32 252.31 295.631)"></path>
            <!-- This following group is the one to be made interactive -->
            <g fill-rule="nonzero" transform="translate(264.313 121.836)" class="interactive" cursor="pointer">
                <ellipse fill="#EFCF6A" rx="17.298" ry="17.28" cx="41.1" cy="90.717"></ellipse>
                <path fill="#E5DBDA"
                      d="M0,68.8755609 C0,68.8755609 23.9403854,39.015945 48.4343057,32.3804748 L89.5342738,57.6782049 C89.5342738,57.6782049 95.6231579,89.4731662 76.9413543,118.641587 L0,68.8755609 Z"></path>
                <path fill="#E5DBDA"
                      d="M89.5342738,0.585513479 L97.5605301,5.2856382 C97.5605301,5.2856382 102.127193,8.32689537 100.88174,15.2388435 C97.8157022,29.5668288 94.0284052,43.7312658 89.5342738,57.6782049 L48.4343057,32.3804748 C48.4343057,32.3804748 73.6201447,6.52978886 79.0171102,2.52085895 C81.9461562,0.0899965767 85.9303942,-0.643174192 89.5342738,0.585513479 L89.5342738,0.585513479 Z"></path>
            </g>
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="351.731 188.715 524.683 188.65 524.678 200.692 351.726 200.757"
                     transform="rotate(22.9 438.204 194.704)"></polygon>
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="400.402 312.102 586.898 312.149 586.902 328.477 400.406 328.43"
                     transform="rotate(104.4 493.652 320.29)"></polygon>
            <ellipse cx="516.376" cy="230.602" fill="#E5DBDA" fill-rule="nonzero" rx="11.624"
                     ry="11.612"></ellipse>
            <path fill="#BFBEBA" fill-rule="nonzero"
                  d="M391.968793,463.396323 L508.764661,463.396323 C512.968159,463.396323 516.375767,466.800366 516.375767,470.999466 L516.375767,482.611539 L384.219304,482.611539 L384.219304,470.999466 C384.219304,468.958805 385.039816,467.003668 386.497246,465.573761 C387.954677,464.143853 389.926333,463.35922 391.968793,463.396323 Z"></path>
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="453.273 466.714 461.299 419.022 476.521 419.022 483.164 466.714"></polygon>
            <ellipse cx="469.879" cy="414.321" fill="#E5DBDA" fill-rule="nonzero" rx="16.606"
                     ry="16.589"></ellipse>
        </g>
    </svg>
</svg>

原理说明 #

• SVG的<g>元素的transform属性负责全局定位，而CSS的transform-origin是相对于该组的局部坐标系设置的——直接使用组内元素的局部坐标（比如椭圆的cx/cy）就能精准锁定缩放中心。
• 这样设置后，鼠标悬停时灯头组会围绕指定点缩放，不会出现位置偏移。

内容的提问来源于stack exchange，提问作者ev350