如何在使用成帧器运动悬停时从中心制作比例尺

Question

下面我得到了一个 svg 图标，它在悬停时会放大，但它似乎并没有从中心开始缩放，我该如何解决这个问题？感谢您的反馈

<motion.svg
            xmlns="http://www.w3.org/2000/svg"
            height="42px"
            viewBox="0 0 24 24"
            width="42px"
            fill="#FFFFFF"
            whileHover={{
              scale: 1.3,
            }}
          >
            <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
            <path d="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h5v12H1z" />
          </motion.svg>

Answer 1

宽度和高度与 viewBox 属性不匹配（24 对 42）。如果你匹配它们，它应该从中心开始缩放。

编辑：
将 SVG 包装在 div 中并使用它来设置所需的大小可能会更好：

<motion.div
  whileHover={{
    scale: 1.3
  }}
  style={{ width: 64, height: 64 }}
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="100%"
    width="100%"
    viewBox="0 0 24 24"
    fill="#000"
  >
    <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
    <path d="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h5v12H1z" />
  </svg>
</motion.div>

如何在使用成帧器运动悬停时从中心制作比例尺

How to make an Scale from the center while hovering using framer motion

css

svg

hover

reactjs

framer-motion