Search code examples
svgclip-path

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

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.

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.

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>

I'm using it like so:

<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:

Bad folder

But it should look like this:

Good folder

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

Edit:

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.

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>

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

Edit 2:

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

Solution

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

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

    Open bugs: https://code.google.com/p/chromium/issues/detail?id=109212 https://bugs.webkit.org/show_bug.cgi?id=105904