Question

SVG <use>标记在Chrome中不起作用。如何在不使用SVG使用标记的情况下对svg形状进行分组，如rect，circle，path？

编辑：

但是，当我拖动iframe中的<g>元素时，它不会移动<g>包含的所有元素是否有任何其他方法来获取所有子元素并用循环拖动它们？

Answer 1

看来这是旧版Webkit中的一个错误。它适用于当前版本的Chrome，但不适用于Safari。尝试关闭使用此<use …></use>而不是<use …/>的使用标记，它应该可以正常工作。 See this comment。

另外，我注意到如果您在CSS中使用它作为数据URI，则需要在xmlns:xlink="http://www.w3.org/1999/xlink"标记中指定XML命名空间svg。

Answer 2

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

Answer 3

我尝试了以下示例代码：

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>（或组）标记与编程语言中遇到的变量和对象具有相似性。虽然这些标签可以通过简单描述本章前面讨论的“简单对象”的示例来说明，但是一旦我们具有使用平移，旋转的等距平面原始操作转换对象的能力，它们的效用可能会更加明显（包括反射）和缩放。

Answer 4

在尝试本教程中的示例时，我遇到了标记问题：http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

有问题的一行是

<use xlink:href="G" transform="translate(120,0)" fill="#bbb">

其中G是前面定义的一组rect和椭圆，给出了id“G”。为了让它在Chrome中运行，我发现我必须在链接名称之前添加“＃”，如

<use xlink:href="#G" transform="translate(120,0)" fill="#bbb">

通过该更改，浏览器中出现了“G”组的第二个副本。

比尔

没有<use>标签的SVG元素分组</use>

4 个答案:

操作：分组，重用，缩放，翻译和轮换