Путь клипа не отображается правильно в SVG-спрайте при использовании «use»

Question

Я пытаюсь взломать лист спрайта из набора значков. Я почти ничего не знаю о SVG. Я могу заставить простые значки работать, но значок с клипом не отображается должным образом. Из того, что я могу сказать, кажется, что он не использует путь клипа.

Спрайт работает в jsfilddle, и он работает, если я просто загружаю svg на свой собственный и включаю оператор < use> в SVG. Но если у меня есть отдельный < 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> 

Когда я использую отдельное заявление он выглядит следующим образом:

Но это должно выглядеть следующим образом:

Цветовое различие не имеет значения, это просто фон, когда была сделана фотография.

Edit:

Я только что обнаружил, что если я сбросить весь спрайт лист на страницу 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 непосредственно с помощью внешней ссылки показывает значок правильно.

Answer 1

Это, кажется, проблема с поддержкой браузера. Использование внешней справки работает как ожидается в Firefox. Chrome не обрабатывает пути клипов и некоторые другие функции во внешних ссылках. Есть выдающийся отчет об ошибке. Safari также не поддерживает его.

Связанные StackOverflow билет: 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