如何为SVG的g元素设置X/Y值，实现内部元素相对定位？

嘿，我来帮你搞定这个问题！你遇到的核心问题是：SVG里的<g>元素根本不支持x和y属性——这和你直觉里的分组定位逻辑不一样对吧？要让整个组的元素一起偏移，得用transform属性的translate()方法才行。

修正后的代码示例 #

这里是调整后的完整代码，我还顺便修正了SVG视口大小（不然平移1000后元素会跑到画布外面看不到）：

<svg width="1500" height="1300" xmlns="http://www.w3.org/2000/svg">
  <!-- 用translate(x,y)实现组的整体偏移，替代无效的x/y属性 -->
  <g transform="translate(1000, 1000)">
    <title>SVG Title Demo example</title>
    <!-- 矩形基于组的新坐标原点定位，无需额外设置x/y -->
    <rect width="200" height="50" style="fill:wheat; stroke:blue; stroke-width:1px"/>
    <!-- 文本相对于组的新原点设置x/y，实现居中在矩形上 -->
    <text x="100" y="30" style="text-anchor: middle;" class="small">My Text</text>
  </g>
</svg>

关键知识点解释 #

• 为什么g的x/y没用？：SVG规范里<g>元素的属性列表中没有x和y，这两个属性是为矩形、文本这类具体图形元素设计的，分组元素得靠坐标变换来实现偏移。
• transform="translate(1000,1000)"的作用：这个指令会把整个组的坐标系统向右平移1000px、向下平移1000px，组内所有元素都会以这个新的原点作为基准定位。
• 文本元素的定位：因为你想让文本居中在矩形上，所以给text设置x="100"（矩形宽度的一半）、y="30"（垂直方向大概居中的位置），这样相对于平移后的组坐标，文本就完美落在矩形中间了。

内容的提问来源于stack exchange，提问作者S M Abrar Jahin