如何移除SVG元素周边内边距？设置preserveAspectRatio无效如何解决

问题根源 #

你配置的preserveAspectRatio="none"对当前的空白问题完全无效——这个属性仅定义SVG内容在可视容器内的拉伸适配规则，不会裁剪超出实际图形的可视区域。你看到的周边空白，本质是当前设置的viewBox范围远大于指针图形的实际绘制边界，空旷的可视区域没有内容填充，就形成了类似内边距的视觉效果。

落地修改步骤 #

• 重写viewBox参数：当前viewBox="0 0 120 114"覆盖了120*114的超大空间，但你的两个path图形所有坐标仅集中在x≈42.1_{62.8、y≈44.6}60.1的小块范围内。把viewBox调整为和实际图形边界匹配的数值即可，例如按计算结果设置为viewBox="42 44 21 17"，让SVG的可视范围刚好框住指针图形，直接切掉所有多余空白。
• 匹配对应尺寸属性：原来写死的width="120px" height="114px"是和旧的大viewBox配套的，调整为和新viewBox比例匹配的尺寸，或直接通过CSS控制实际显示大小，避免大尺寸容器装小图形留出空隙。
• 清理冗余无效配置：
  • 当前SVG标签重复定义了两个id（外层id="fake-cursor"和内置的id="Layer_1"），重复id会导致CSS选择器匹配异常，删掉冗余的id="Layer_1"属性。
  • 如果不需要强制拉伸SVG变形，preserveAspectRatio="none"可以直接移除，这个属性对当前的裁剪问题没有任何帮助。

内容的提问来源于stack exchange，提问作者Sara Ree