Question

我想在svg中写一个徽标，但令人惊讶地发现我无法重复使用<defs>...</defs>中定义的对象。我在Chrome上试过它们。

请参阅示例：

test1.html不起作用，没有画出矩形。

<!DOCTTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         width="480" height="360">
      <defs>
        <rect id="helo" x="0" y="0" height="20" width="20" />
      </defs>
      <use xlink:href="#helo" />
    </svg>
  </body>
</html>

但是test2.svg有效。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
              "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="480" height="360">
  <defs>
    <rect id="helo" x="0" y="0" height="20" width="20" />
  </defs>
  <use xlink:href="#helo" />
</svg>

使test1.html工作需要什么？非常感谢:)

Answer 1

似乎这是Webkit中的一个错误： Importing external SVG (with WebKit) https://bugs.webkit.org/show_bug.cgi?id=12499

如果您要创建SVG图标，我会在单独的.svg文件中创建它，然后将其添加到带有object标记的HTML中。无论如何，这会更好，因为如果你对SVG文件进行了更改，它将改变你网站上的所有实例。

Answer 2

此错误现在似乎已得到解决，但是有一个重要的警告，当您尝试在HTML页面上重新使用SVG中defs标记中的对象时，xmlns:xlink="http://www.w3.org/1999/xlink"很重要并且必须添加到SVG标记中。没有它，href就无法解决。

重用<defs>中定义的对象？</defs>

2 个答案: