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

Question

我在使用HTML5的SVG绘图中相对较新。

我想要做的就是让一组SVG元素与g组件，使得内部的所有元素摹元素可以像一个组和所有元素的基础工作，X和Ÿ值可以从接收上部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"所以我的期望输出是这样的-

但是我得到这个-

回覆-

我不喜欢在textelement中设置x和y 元素。我只想在需要时将相对x和y设置到text元素中，但这应该相对于g元素。

任何人都可以帮助我与SVG小组一起实现我的目标所需做的事情吗？

Answer 1

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

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

我已经在text元素上提供了其他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>