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

below i got an svg icon that scale up in size while hovering but it doesnt seem to scale from the center , how i can fix that? appreciate your feedback

<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>

CodePudding user response：

The width and height don't match the viewBox properties (24 vs 42). If you make those match it should scale from the center.

Edit:
You might have better luck wrapping the SVG in a div and using that to set the size you want:

<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>