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

Question

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

我想要做的就是让一组SVG元素与g组件 ，使得g组件内部的所有元素可以工作就像一个组和所有元素的基础x和y的值可以从上g组件接收。

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

 <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> <gx="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>