使用“use”时，剪辑路径无法在 SVG 精灵中正确显示

我正在尝试将一组图标拼凑成一个精灵表。我对 SVG 几乎一无所知。我可以使用简单的图标，但带有剪辑路径的图标无法正确显示。据我所知，它似乎没有使用剪辑路径。

精灵在 jsfilddle 中工作，如果我只加载它自己的 svg 并在 SVG 中包含 语句，它就可以工作。但如果我有一个单独的，它就不起作用。

我所有的测试都是在 Chrome (50.0.2661.94) 中完成的

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <clipPath id="folder-clip-0">
      <path d="..." />
    </clipPath>

    <symbol id="folder" viewBox="0 0 32 32">
      <g class="container" data-width="32" data-height="27" transform="translate(0 2)">
        <path d="..." class="..." />
        <path class="..." d="..." />
        <path clip-path="url(#folder-clip-0)" d="..." class="..." />
      </g>
    </symbol>
  </defs>
</svg>

我这样使用它：

<svg>
  <use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/img/path/sprite.svg#folder">
  </use>
</svg>

当我使用单独的语句时，它看起来像这样：

但它应该看起来像这样：

色差无关紧要，只是拍摄图像时的背景。

Edit:

我刚刚发现，如果我将整个精灵表转储到 HTML 页面中并在本地引用它而不是外部文件，它就可以工作。所以我不知道我的外部参考有什么问题。

e.g.

<svg>
  <use xlinkHref={"/img/path/not/work/sprite.svg#folder"}></use>
</svg>

vs.

<svg>
  <symbol id="folder"></symbol>
</svg>
<svg>
  <use xlinkHref={"#folder"}></use>
</svg>

这对我来说是一种后备方案，但我宁愿有一个外部 SVG 文件，而不是将其嵌入到我的 HTML 中。

Edit 2:

如果直接使用外部链接将 SVG 精灵表嵌入到 HTML 中，则会正确显示图标。

这似乎是浏览器支持问题。在 Firefox 中使用外部引用可以正常工作。 Chrome 不处理外部引用中的剪辑路径和其他一些功能。已提交一份未完成的错误报告。 Safari 也不支持它。

相关 StackOverflow 票证：为什么我无法引用外部文件（绘画服务器）中定义的 SVG 线性渐变？

打开的错误：https://code.google.com/p/chromium/issues/detail?id=109212 https://bugs.webkit.org/show_bug.cgi?id=105904