下面我有一個 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>
uj5u.com熱心網友回復：
寬度和高度與屬性不匹配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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454221.html
下一篇：如何創建SVGGooey效果