2

我正在尝试从一组图标中拼凑出一张精灵表。我对 SVG 几乎一无所知。我可以让简单的图标正常工作，但是带有剪辑路径的图标无法正确显示。据我所知，它似乎没有使用剪辑路径。

精灵在 jsfilddle 中工作，如果我自己加载 svg 并在 SVG 中包含 < use > 语句，它就可以工作。但是如果我有一个单独的 < use > 它就行不通了。

我所有的测试都在 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>

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

坏文件夹

但它应该看起来像这样：

好文件夹

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

编辑：

我刚刚发现，如果我将整个精灵表转储到页面 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 精灵表嵌入到 HTML 中，则会正确显示图标。

4

1 回答 1

3

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

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

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

于 2016-05-06T17:07:21.207 回答