问不带<use>标签的SVG元素分组

EN

use在WebKit/Chrome中应该可以很好地工作，但您想要用于分组的是g元素。有关详细信息，请参阅http://www.w3.org/TR/SVG/struct.html#Groups。

这似乎是旧版本Webkit中的错误。它可以在当前版本的Chrome上运行，但不能在Safari上运行。尝试像这样结束use标记，而不是<use …/>，它应该可以工作。See this comment。

此外，我注意到，如果您在svg中将其用作数据URI，则需要在CSS标记中指定XML Namespace xmlns:xlink="http://www.w3.org/1999/xlink"。

我尝试了下面的示例代码：

http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_web

<g stroke="black" stroke-width="2" fill="none" >
  <ellipse id="g1" cx="100" cy="100" rx="75" ry="40" />
  <use xlink:href="g1" transform="rotate(30 100 100)"/>
  <use xlink:href="g1" transform="rotate(60 100 100)"/>
</g>

它在火狐、Chrome和Opera上都不起作用。

也可以从上面的URL

操作:分组、重用、缩放、平移和旋转

到目前为止，我们有机会看到SVG和HTML之间的许多相似之处:这两种标记语言都具有标记和属性，可以修改这些标记的外观。SVG开始看起来不太像一种标记语言，而更像是一种编程环境，因为它能够重用和修改自己的内容(在自己的系统中)。也就是说，元素可以以容器修改其内部元素的外观的方式包含在其他元素中。具体地说，我们可以以简化代码维护和缩短文档总长度的方式对元素进行分组和重用。<use> (重用)和<g> (或组)标记与编程语言中遇到的变量和对象具有相似性。虽然这些标签可以通过仅在本章前面讨论的“简单对象”上绘制的示例来举例说明，但一旦我们能够使用平移、旋转(包括反射)和缩放等距平面图元操作来变换对象，它们的作用就会变得更加明显。