为 SVG 的 g 元素设置 X 和 Y 值

Question

我在 SVG 使用 HTML5 绘图方面相对较新。

我想做的是用g element在SVG中创建一组元素，这样g元素内的所有元素都可以像一个组一样工作，并且所有元素的基础 x和y值可以从上g元素接收。

所以，我所做的就是这样-

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g x="1000" y="1000">
    <title>SVG Title Demo example</title>
    <rect width="200" height="50"
    style="fill:wheat; stroke:blue; stroke-width:1px"/>
    <text style="text-anchor: middle;" class="small">My Text</text>
  </g>
</svg>

我期望的是 g 元素内的所有元素都会得到 x="1000" 和 y="1000" 所以我的预期输出是这样的-

但我得到了这个-

重新-

我不喜欢在text 元素中设置 x 和 y 元素。如果需要，我只想将相对 x 和 y 设置为 text 元素，但这应该是相对于 g 元素的。

谁能帮助我在 SVG 中实现我的目标需要做些什么？

Answer 1

<g> 元素不支持 x 或 y 属性。不过，您可以使用转换。

我已将值从 1000 减少到 100，否则输出在外部 <svg> 元素的 500 x 300 画布之外。

我在文本元素上提供了额外的 x 和 y 属性，因此它的位置与您的示例一样。如果需要，您可以将文本本身放入 <g> 元素或 <svg> 元素中。

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(100, 100)">
    <title>SVG Title Demo example</title>
    <rect width="200" height="50"
    style="fill:wheat; stroke:blue; stroke-width:1px"/>
    <text x="100" y="30" style="text-anchor: middle;" class="small">My Text</text>
  </g>
</svg>

或使用额外的 <g> 元素来避免文本本身出现 x 和 y。

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(100, 100)">
    <title>SVG Title Demo example</title>
    <rect width="200" height="50"
    style="fill:wheat; stroke:blue; stroke-width:1px"/>
    <g transform="translate(100, 30)">
        <text style="text-anchor: middle;" class="small">My Text</text>
    </g>
  </g>
</svg>

或者，您可以使用内部 <svg> 元素而不是 <g> 元素，因为它支持 x 和 y 属性

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <svg x="100" y="100">
    <title>SVG Title Demo example</title>
    <rect width="200" height="50"
    style="fill:wheat; stroke:blue; stroke-width:1px"/>
    <text x="100" y="30" style="text-anchor: middle;" class="small">My Text</text>
  </svg>
</svg>