如何按比例缩小SVG图像适配视口并制作32x32的CSS光标

嘿，这问题太常见了，刚玩SVG的朋友几乎都会踩这个坑——你把SVG的宽高设小了，但图形本身的坐标还是基于原来的大坐标系，所以自然显示不对。我来给你拆解一下问题，再给两个简单的解决办法，保证能得到完美的32x32目标光标～

首先说问题出在哪：你的SVG视口（width/height设的100x100）和path里的图形完全不匹配。看你的path代码，起始点是149,25，还画了个半径125的大圆，这意味着整个图形的实际范围比100x100大得多，你把视口改小后，图形直接“跑出去”了，自然看不到完整的目标。

方法一：直接调整path坐标适配32x32视口 #

这个方法最直接，把path的所有坐标按比例缩小，让它刚好放进32x32的视口里。我们把原来的大图形（直径250）缩到32px宽，缩放比例大概是0.128，所有数值都按这个比例缩小就行。

修改后的CSS代码直接用就行：

body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path fill='%23FFF' stroke='%23E50024' stroke-width='2' d='m19.07,3.2a16,16 0 1,0 0.26,0zm0.26,12.8a3.2,3.2 0 1,1-0.26,0z'/></svg>"), auto;
}

我给你改了这些地方：

• 把SVG的width/height和viewBox都设为32x32，直接定义我们要的光标尺寸
• 把path里的所有坐标（包括半径、起始点）都按比例缩小了，比如原来的125半径变成16，25半径变成3.2
• 把stroke-width从50改成2，不然边框会粗到占满整个视口，这也是按比例缩的

方法二：用transform缩放图形（不用改path坐标） #

如果你不想手动算坐标，这个方法更省心——给整个path套个<g>标签，用transform属性把图形直接缩放到视口大小，同时调整viewBox让图形完全显示：

body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='24 -100 250 250'><g transform='scale(0.128)'><path fill='%23FFF' stroke='%23E50024' stroke-width='50' d='m149,25a125,125 0 1,0 2,0zm2,100a25,25 0 1,1-2,0z'/></g></svg>"), auto;
}

这里的关键细节：

• viewBox='24 -100 250 250'：这个值刚好覆盖你原来path的所有图形范围，确保整个目标都在SVG视口内
• transform='scale(0.128)'：32除以250（原图形的宽度）得到这个缩放比例，刚好把大图形缩到32px宽，填满我们要的光标尺寸
• 把path放进<g>里统一缩放，不用动原来的path代码，特别适合复杂的SVG

小提示 #

• 你可以先把修改后的SVG单独存成文件打开看看，确认显示的是完整的目标图标，再放到CSS里，这样调试起来更方便
• 你原来代码里把#转成%23的操作是对的，CSS data URI里必须转义这些特殊字符
• 如果光标点击位置和图标中心不对齐，可以微调viewBox的数值，或者在SVG里加viewBox的偏移量来校准

内容来源于stack exchange