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

发布于 2025-01-17 06:59:48 字数 704 浏览 8 评论 0原文

下面我有一个 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

も让我眼熟你 2025-01-24 06:59:48

宽度和高度与 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>

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>

回复收藏 0 原文

~没有更多了~