如何通过纯SVG将所有图形元素向右向下平移？无需HTML/CSS

最简便的方法：用<g>组元素加transform属性 #

把所有需要平移的图形（线条、多边形、圆形、文本等）全部包裹在<g>标签里，通过transform="translate(x, y)"实现整体偏移：

• x：向右平移的距离（正数向右，负数向左）
• y：向下平移的距离（正数向下，负数向上）

实际示例代码：

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 向右移25px，向下移40px -->
  <g transform="translate(25, 40)">
    <circle cx="40" cy="40" r="18" fill="#2ECC71"/>
    <line x1="80" y1="20" x2="120" y2="60" stroke="#3498DB" stroke-width="3"/>
    <text x="150" y="45" font-size="14">平移后的内容</text>
  </g>
</svg>

另一种方式：调整SVG的viewBox属性 #

如果不想改动元素的实际坐标，只是希望整个SVG内容在画布上偏移显示，可以修改viewBox的起始值。比如原viewBox="0 0 200 200"，改成viewBox="-25 -40 200 200"，相当于把视口向左上移动，视觉上内容就向右下偏移了：

<svg width="300" height="300" viewBox="-25 -40 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="40" cy="40" r="18" fill="#2ECC71"/>
  <text x="80" y="50">通过viewBox偏移的文本</text>
</svg>

关于SVG中的margin/padding替代 #

SVG没有原生的margin或padding属性，但上面两种方法可以实现类似效果：

• <g>的translate直接修改所有元素的位置，相当于给内容添加了"内偏移"
• 调整viewBox则是改变画布的显示范围，相当于给SVG整体加了"外间距"

内容的提问来源于stack exchange，提问作者Harjit S. Batra