为SVG的g元素设置X和Y值 [英] Set X and Y value for g element of SVG

问题描述

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

I am relatively new in SVG drawing with HTML5.

我想做的是使用 g元素 ，以便该 g 元素内的所有元素都可以像一个组一样工作，并且所有元素的基础 x >和 y 值可以从上部g元素接收.

What I want to do is to make a group of elements in SVG with g element so that all elements inside of that g element can work like a group and all the element's base x and y value can be received from the upper g element.

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

So, what I have done is something like this-

<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"，所以我的期望输出是这样的-

What I expected is all the elements inside the g element will get x="1000" and y="1000" so my expected output is like this-

但是我得到了-

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

I don't like to set x and y element in text element. I just want to set relative x and y into the text element if needed, but that should be relative to g element.

有人可以帮助我在SVG中实现小组目标吗?

Can anyone help me what I need to do to achieve my target with a group in SVG?

推荐答案

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

<g> elements don't support x or y attributes. You can use a transform instead though.

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

I've decreased the values from 1000 to 100 as otherwise the output is outside the 500 x 300 canvas of the outer <svg> element.

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

I've provided additional x and y attributes on the text element so it appears positioned as in your example. If wanted you could put the text itself in a <g> element or an <svg> element.

<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.

or using an additional <g> element to avoid x and y on the text itself.

<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属性

Alternatively you could use an inner <svg> element instead of a <g> element as that does support x and y attributes

<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>

这篇关于为SVG的g元素设置X和Y值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！