SVG <use> 标签在 chrome 中不起作用。如何在不使用 SVG 使用标签的情况下对矩形、圆形、路径等 svg 形状进行分组？
编辑：
但是当我在 iframe 中拖动 <g> 元素时，它不会移动 <g> 包含的所有元素，还有其他方法可以让我所有子元素并用循环拖动它们吗？？？？？？
【问题讨论】：
<use> 的示例在 Chrome 中看起来很好：carto.net/papers/svg/samples/symbol.svg
<use> 被描述为“元素分组”。我会说这是用于符号实例化。 <g> 用于分组。您是否有一个示例说明您想要完成但在 Chrome 中不起作用的示例？
标签： svg
这似乎是旧版 Webkit 中的一个错误。它适用于当前版本的 Chrome，但不适用于 Safari。尝试像 <use …></use> 而不是 <use …/> 这样关闭使用标签，它应该可以工作。 See this comment。
另外，我注意到如果您在 CSS 中将其用作数据 URI，则需要在 svg 标记中指定 XML 命名空间 xmlns:xlink="http://www.w3.org/1999/xlink"。
【讨论】：
namespace 声明 - 这对我来说是 Chrome 中的修复。
use 在 WebKit/Chrome 中应该可以正常工作，但您要用于分组的是 g 元素。请参阅http://www.w3.org/TR/SVG/struct.html#Groups 了解更多信息。
【讨论】：
我尝试了以下示例代码：
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>
它不适用于 Firefox、Chrome 或 Opera。
同样来自上面的网址
操作：分组、重用、缩放、平移和旋转
到目前为止，我们有机会看到 SVG 和 HTML 之间的许多相似之处：两种标记语言的标签和属性可以修改这些标签的外观。 SVG 开始看起来不再像标记语言而更像编程环境的地方在于它能够重用和修改自己的内容（在自己的系统内）。也就是说，元素可以包含在其他元素中，容器可以修改其中元素的外观。具体来说，我们可以以简化代码维护并缩短文档总长度的方式对元素进行分组和重用。
<use>（重用）和<g>（或组）标签与编程语言中遇到的变量和对象相似。虽然这些标签可以用本章前面讨论的“简单对象”的例子来举例说明，但一旦我们有能力使用平移、旋转等等距平面原始操作（包括反射）和缩放。
【讨论】：
<use> 在列出的浏览器中根本不起作用（但在其他浏览器中起作用，例如 Safari 或 MSIE），或者示例格式不正确，或者其他什么.我也不完全清楚这句话是如何适用于这一切的。
在尝试此处教程中的示例时，我遇到了标签问题：http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
有问题的行是
<use xlink:href="G" transform="translate(120,0)" fill="#bbb">
其中 G 是前面定义的一组矩形和椭圆，并给出了 id “G”。为了让它在 Chrome 中工作，我发现我必须在链接名称之前添加一个“#”，例如
<use xlink:href="#G" transform="translate(120,0)" fill="#bbb">
随着这一变化，组“G”的第二个副本出现在浏览器中。
比尔
【讨论】：