SVG的g元素设置X和Y值

Question

SVG的g元素设置X和Y值

19

我在使用HTML5绘制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组实现我的目标吗？

- Abrar Jahin

你是想要使用 SVG 还是只是想在 HTML5 中绘制盒子，HTML5 有自己的绘图工具（画布）？ - cup

我正在使用 SVG，而不是 Canvas。 - Abrar Jahin

这也很有帮助！https://dev59.com/cHRB5IYBdhLWcg3w4bEo - frederj

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

<g>元素不支持x或y属性。但您可以使用transform代替。

我已将值从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>