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

Question

我正在尝试从一组图标中拼凑出一个 sprite sheet。我对 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>

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

但它应该是这样的：

色差无关紧要，只是拍照时的背景。

编辑：

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

例如

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

对比

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

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

编辑 2：

如果 SVG sprite sheet 嵌入 HTML 直接使用外部 link 可以正确显示图标。

Answer 1

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

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

Clip path not displaying properly in SVG sprite when using "use"

svg

clip-path