当使用"use"按钮时，剪切路径在SVG子画面中无法正确显示. [英] Clip path not displaying properly in SVG sprite when using "use"

问题描述

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

I'm trying to hack together a sprite sheet from a set of icons. I know almost nothing about SVG. I can get the simple icons to work, but an icon with a clip path isn't displaying properly. From what I can tell it seems like it's not using the clip path.

该sprite可在jsfilddle中工作，如果我自己单独加载svg并包含<在SVG中使用>语句.但是如果我有另外一个<使用>无效.

The sprite works in jsfilddle and it works if I just load the svg on it's own and include a < use > statement in the SVG. But if I have a separate < use > it doesn't work.

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

All my testing has been done in 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>

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

When I use the separate statement it looks like this:

但是它应该看起来像这样:

But it should look like this:

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

The color difference is not relevant, it's just the background when the image was taken.

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

I just discovered that if I dump the whole sprite sheet into the page HTML and reference it locally instead of an external file it works. So I don't know what's wrong with my external reference.

例如

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

This works for me as a fallback, but I'd rather have an external SVG file instead of embedding it in my HTML.

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

If the SVG sprite sheet is embeded in the HTML directly using the external link shows the icon correctly.

推荐答案

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

This seems to be a browser support issue. Using the external reference works as expected in Firefox. Chrome doesn't handle clip paths and some other functions in external references. There's an outstanding bug report filed. Safari also doesn't support it.

相关的StackOverflow凭单:为什么我不能引用在外部文件(绘画服务器)中定义的SVG线性渐变?

Related StackOverflow ticket: Why can't I reference an SVG linear gradient defined in an external file (paint server)?

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

这篇关于当使用"use"按钮时，剪切路径在SVG子画面中无法正确显示.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！