blocks|key|352244|text|G元素中的所有内容都是相对于当前变换矩阵进行定位的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|352245|要移动内容，只需将转换放入g元素：|352246|<g+transform="translate(20,2.5)+rotate(10)">
++++<rect+x="0"+y="0"+width="60"+height="10"/>
</g>|code-block|syntax|javascript|352247|链接:来自the+SVG+1.1+spec的Example|offset|length|352248|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/SVG11/struct.html|1|http://www.w3.org/TR/SVG11/images/struct/Use03-GeneratedContent.svg^0|0|0|0|5|G|0|M|7|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]|$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Everything in the g element is positioned relative to the current transform matrix.</p>

<p>To move the content, just put the transformation in the g element:</p>

<pre><code>&lt;g transform="translate(20,2.5) rotate(10)"&gt;
    &lt;rect x="0" y="0" width="60" height="10"/&gt;
&lt;/g&gt;
</code></pre>

<p>Links: <a href="http://www.w3.org/TR/SVG11/images/struct/Use03-GeneratedContent.svg" rel="noreferrer">Example</a> from <a href="http://www.w3.org/TR/SVG11/struct.html" rel="noreferrer">the SVG 1.1 spec</a></p>


blocks|key|349827|text|对于前面的答案，有一个更短的替代方案。SVG元素也可以通过嵌套svg元素进行分组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|349828|<svg+xmlns="http://www.w3.org/2000/svg"
++xmlns:xlink="http://www.w3.org/1999/xlink">
++<svg+x="10">
++++<rect+x="10"+y="10"+height="100"+width="100"+style="stroke:#ff0000;fill:+#0000ff"/>
++</svg>
++<svg+x="200">
++++<rect+x="10"+y="10"+height="100"+width="100"+style="stroke:#009900;fill:+#00cc00"/>
++</svg>
</svg>|code-block|syntax|javascript|349829|这两个矩形是相同的(除了颜色)，但父svg元素具有不同的x值。|349830|See+http://tutorials.jenkov.com/svg/svg-element.html。|offset|length|349831|entityMap|0|LINK|mutability|MUTABLE|url|http://tutorials.jenkov.com/svg/svg-element.html^0|0|0|0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>There is a shorter alternative to the previous answer. SVG Elements can also be grouped by nesting svg elements:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;svg x="10"&gt;
    &lt;rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/&gt;
  &lt;/svg&gt;
  &lt;svg x="200"&gt;
    &lt;rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/&gt;
  &lt;/svg&gt;
&lt;/svg&gt;
</code></pre>

<p>The two rectangles are identical (apart from the colors), but the parent svg elements have different x values.</p>

<p><a href="http://tutorials.jenkov.com/svg/svg-element.html">See http://tutorials.jenkov.com/svg/svg-element.html</a>.</p>


blocks|key|351089|text|正如在另一个注释中提到的，g元素上的transform属性就是您想要的。使用transform="translate(x,y)"移动g，g中的内容将相对于g移动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|351090|entityMap^0|D|1|I|9|12|Q|1U|1|1W|1|25|1|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|G|$]]

<p>As mentioned in the other comment, the <code>transform</code> attribute on the <code>g</code> element is what you want.  Use <code>transform="translate(x,y)"</code> to move the <code>g</code> around and things within the <code>g</code> will move in relation to the <code>g</code>.</p>


blocks|key|351117|text|有两种方法可以对多个SVG形状进行分组和定位：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|351118|Aaron写道，第一个使用带有transform属性的<g>。但是您不能只在<g>元素上使用x属性。|offset|length|style|CODE|351119|另一种方法是使用嵌套的<svg>元素。|351120|<svg+id="parent">
+++<svg+id="group1"+x="10">
++++++
+++</svg>
</svg>|code-block|syntax|javascript|351121|这样，#group1SVG嵌套在#parent中，并且x=10是相对于父svg的。但是，您不能在<svg>元素上使用transform属性，这与<g>元素正好相反。|351122|entityMap^0|0|F|9|R|3|12|3|1A|1|0|B|5|0|0|R|4|1C|5|1M|9|20|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|R|$]]

<p>There are two ways to group multiple SVG shapes and position the group:  </p>

<p>The first to use <code>&lt;g&gt;</code> with <code>transform</code> attribute as Aaron wrote. But you can't just use a <code>x</code> attribute on the <code>&lt;g&gt;</code> element.  </p>

<p>The other way is to use nested <code>&lt;svg&gt;</code> element.  </p>

<pre><code>&lt;svg id="parent"&gt;
   &lt;svg id="group1" x="10"&gt;
      &lt;!-- some shapes --&gt;
   &lt;/svg&gt;
&lt;/svg&gt;
</code></pre>

<p>In this way, the #group1 svg is nested in #parent, and the <code>x=10</code> is relative to the parent svg. However, you can't use <code>transform</code> attribute on <code>&lt;svg&gt;</code> element, which is quite the contrary of <code>&lt;g&gt;</code> element.</p>


blocks|key|3132214|text|我知道这是旧的，但是无论是<svg>组标签还是<g>都不能解决我所面临的问题。我需要调整一个<g>标签的y位置，这个标签上也有动画。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3132215|解决方案是同时使用<svg>和<g>标签：|3132216|<svg+y="1190"+x="235">
+++<g+class="light-1">
+++++<path+/>
+++</g>
</svg>|code-block|syntax|javascript|3132217|entityMap^0|D|5|N|3|1A|3|0|9|5|F|3|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

<p>I know this is old but neither an <code>&lt;svg&gt;</code> group tag nor a <code>&lt;g&gt;</code> fixed the issue I was facing. I needed to adjust the y position of a <code>&lt;g&gt;</code> tag which also had animation on it.</p>
<p>The solution was to use both the <code>&lt;svg&gt;</code> and <code>&lt;g&gt;</code> tag together:</p>
<pre><code>&lt;svg y=&quot;1190&quot; x=&quot;235&quot;&gt;
   &lt;g class=&quot;light-1&quot;&gt;
     &lt;path /&gt;
   &lt;/g&gt;
&lt;/svg&gt;
</code></pre>


<p>I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the <code>g</code> group tag. I was hoping to use it like a container, so I could set its x position and then all the elements in that group would also move. But that doesn't seem to be possible.</p>

<ol>
<li>How do most people go about positioning a group of elements which you wish to move in tandem?</li>
<li>Is there any concept of relative positioning? e.g. relative to its parent</li>
</ol>


SVG Positioning

33 天实现自己的 AI 进化论？发文瓜分机械键盘、耳机等万元奖池！点击参加活动：<a href="https://cloud.tencent.com/developer/article/2503022" target="_blank">https://cloud.tencent.com/developer/article/2503022</a><br/> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/01543e0407db10898a7ee9f420794432.jpg"/>

技术创作特训营有奖征文

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

我正在使用SVG，并且在定位方面有一些问题。我有一系列的形状，它们包含在g组标签中。我希望像使用容器一样使用它，这样我就可以设置它的x位置，然后该组中的所有元素也会移动。但这似乎是不可能的。大多数人是如何定位一组你希望同时移动的元素的？有相对定位的概念吗？例如，相对于其父

问SVG定位
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG定位EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG定位
EN