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

容器

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

问SVG定位
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG定位EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG定位
EN