1

我想在 svg 中写一个 logo，但令人惊讶地发现我无法重用<defs>...</defs>. 我在 Chrome 上试过了。

请看示例：

  1. 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>

  2. 但是 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 工作需要什么？非常感谢：）

4

2 回答 2

1

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

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

于 2012-07-23T14:34:38.190 回答
0

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

于 2013-12-30T22:31:38.840 回答