SVG元素分组不带<；使用>；标签

SVG

标记在chrome中不起作用。如何在不使用svg use标记的情况下对矩形、圆形、路径等svg形状进行分组

编辑：

---

但是，当我在iframe中拖动

元素时，它不会移动

包含的所有元素。是否有其他方法获取所有子元素并使用循环拖动它们

use

在WebKit/Chrome中应该可以正常工作，但是您想要用于分组的是

g

元素。有关更多信息，请参阅。

我尝试了以下示例代码：

它不适用于Firefox、Chrome或Opera

也可以从上面的URL

操作：分组、重用、缩放、平移和旋转 到目前为止，我们已经有机会看到SVG和HTML之间有很多相似之处：两种标记语言带有标记和属性，可以修改这些标记的外观。SVG开始看起来不像一种标记语言，而更像一种编程环境的地方在于它能够重用和修改自己的内容（在自己的系统中）。也就是说，元素可以包含在其他元素中，容器可以修改其中元素的外观。具体来说，我们可以通过简化代码维护和缩短文档总长度的方式对元素进行分组和重用。

（重用）和

（或组）标记与编程语言中遇到的变量和对象相似。虽然这些标记可以用本章前面讨论的“简单对象”上的示例来举例说明，但一旦我们能够使用平移、旋转（包括反射）和缩放等等等轴测平面基本操作来变换对象，它们的实用性就会变得更加明显

---

在这里尝试教程中的一个示例时，我遇到了标签问题：

有问题的路线是

<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”组的第二个副本出现在浏览器中

---

Bill

这似乎是旧版本Webkit中的一个bug。它在当前版本的Chrome中工作，但不是Safari。试着像这样关闭use标记，而不是像这样关闭

，它应该可以工作

---

另外，我注意到您需要指定XML名称空间

xmlns:xlink=”http://www.w3.org/1999/xlink“

在您的

svg

标记中，如果您将其用作CSS中的数据URI。

根据我的经验，“use”元素在chrome中工作得很好。

在chrome中看起来很好的示例如下：，我从未听说过

被描述为“元素分组”。我会说这是为了符号实例化<代码>用于分组。你有没有一个在Chrome中不起作用的例子来说明你想要完成什么？这是一个答案吗？还是一个新问题？欢迎来到堆栈溢出。从你的回答中，我不清楚你是说

在列出的浏览器中根本不起作用（但在其他浏览器中，如Safari或MSIE），还是该示例的格式不正确。我也不完全清楚这个大引号是如何适用于所有这一切的。+1因为注意到

名称空间
声明-这是Chrome对我的修正。
<use xlink:href="#G" transform="translate(120,0)" fill="#bbb">