如何将128×128像素SVG图像的坐标原点设置到图像中心

128×128像素的SVG无需批量修改所有rect元素坐标，仅需2处改动即可将坐标原点(0,0)移至图像中心（原左上角坐标系下的(64,64)位置），且原有图形渲染位置、像素锐利度完全不变：

• 给SVG根节点添加viewBox="-64 -64 128 128"属性，将视口坐标范围设为x从-64到64、y从-64到64，此时坐标(0,0)自然对应视口物理中心。
• 用<g>分组标签包裹所有原有rect元素，给分组添加transform="translate(-64, -64)"属性，将原有基于左上角坐标系的图形坐标偏移适配到新视口范围，保证视觉效果和修改前完全一致。

修改后代码示例 #

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="128" height="128" viewBox="-64 -64 128 128" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
  <g transform="translate(-64, -64)">
    <rect x="0" y="0" width="1" height="1" fill="#C2F8FF" />
    <rect x="1" y="0" width="1" height="1" fill="#C2F8FF" />
    <rect x="2" y="0" width="1" height="1" fill="#C2F8FF" />
    <rect x="3" y="0" width="1" height="1" fill="#C2F8FF" />
    <!-- 其余原有rect元素全部放在该g标签内部即可 -->
  </g>
  <!-- 后续新增图形可直接写在g标签外，此时(0,0)即为图像中心 -->
</svg>

可选配置 #

如果需要将y轴改为数学坐标系常用的向上为正方向（SVG默认向下为y轴正方向），可将g标签的transform属性修改为transform="translate(-64, -64) scale(1, -1)"，注意该操作会将原有图形上下翻转，仅适合需要绘制坐标类图形的场景。

方案优势 #

Aseprite导出的像素风SVG通常包含数百上千个1×1像素的rect元素，批量修改x/y属性操作繁琐且易出错；本方案仅新增两行代码，完全不改动原有图形数据，后续如果需要恢复左上角原点，直接删除viewBox属性和外层g标签即可。

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