2

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.

7
  • What browser are you trying this on? Commented May 5, 2016 at 17:17
  • Chrome 50.0.2661.94 added that to the post. Commented May 5, 2016 at 17:20
  • Strange, minimal test works on Nightly but nothing appears on Chromium. Perhaps it's a bug/not implemented? Commented May 5, 2016 at 18:47
  • Can you try moving the clip-path reference from the <symbol> to <use> as an attribute (e.g. clip-path="url(#folder-clip-0)") ? Commented May 5, 2016 at 19:35
  • Adding the clip-path to the use doesn't do anything. Interestingly if I have the SVG embeded in the HTML it works correctly if I use the external ref. Commented May 5, 2016 at 19:45

1 Answer 1

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.