Почему не работает svg clip-path и mask в chrome?

Question

[fu11buster]

В проекте хочу использовать svg-спрайты, но столкнулся с одной проблемой:
Не работает SVG clip-path и mask в webkit-браузерах, в то время как в firefox все прекрасно работает.
Файл svg (icon-sprite.svg:

<svg style="width: 0; height: 0;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <mask id="p-permalink_a" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse"><path fill="#fff" stroke="#fff" d="M15.154 8.028c0 4.004-3.207 7.24-7.152 7.24-3.944 0-7.152-3.236-7.152-7.24S4.058.788 8.002.788c3.945 0 7.152 3.236 7.152 7.24z"/></mask>
  <clipPath id="p-permalink_clip0"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath>
  <clipPath id="p-postgresql_clip0"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath>
  <mask id="m-tool_a" fill="#fff"><path fill-rule="evenodd" d="M13 6.959c1.196-.656 2-1.882 2-3.286C15 1.906 13.725.421 12 0v2.673a1 1 0 11-2 0V0C8.275.421 7 1.906 7 3.673c0 1.404.804 2.63 2 3.286V14a2 2 0 104 0V6.959z" clip-rule="evenodd"/></mask>
  <clipPath id="m-tool_clip0"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath>
  <mask id="m-dashboard_a" fill="#fff"><path fill-rule="evenodd" d="M14.856 6L7.928 0 1 6h.928v10h12V6h.928z" clip-rule="evenodd"/></mask>
</defs>

  <symbol id="home" viewBox="0 0 16 16" fill="none"><path fill="#fff" fill-rule="evenodd" d="M14.856 6L7.928 0 1 6h.928v10h12V6h.928z" clip-rule="evenodd"/><path fill="var(--isp-icons-main-color, #344A5E)" d="M7.928 0l.655-.756-.655-.567-.654.567.654.756zm6.928 6v1h2.683L15.51 5.244 14.856 6zM1 6l-.655-.756L-1.682 7H1V6zm.928 0h1V5h-1v1zm0 10h-1v1h1v-1zm12 0v1h1v-1h-1zm0-10V5h-1v1h1zM7.274.756l6.928 6 1.31-1.512-6.93-6L7.275.756zm-5.62 6l6.929-6-1.31-1.512-6.928 6 1.31 1.512zM1.929 5H1v2h.928V5zm1 11V6h-2v10h2zm11-1h-12v2h12v-2zm-1-9v10h2V6h-2zm1.928-1h-.928v2h.928V5z" mask="url(#m-dashboard_a)"/><path fill="#fff" stroke="var(--isp-icons-main-color, #344A5E)" d="M6.428 7.7c0-.11.09-.2.2-.2h2.6c.11 0 .2.09.2.2v7.8h-3V7.7zM9.343 5.5a1.5 1.5 0 00-2.83 0h2.83z"/></symbol>

  <symbol id="tool" viewBox="0 0 16 16" fill="none"><g clip-path="url(#m-tool_clip0)"><path fill="#fff" stroke="var(--isp-icons-main-color, #344A5E)" d="M4.034 10.93l.434-6.585h.064l.434 6.585h-.932zM3.5 1.5h2v1.518a1 1 0 01-1.534.846l-.268.422.268-.422a1 1 0 01-.466-.846V1.5z"/><path fill="#fff" stroke="var(--isp-icons-main-color, #344A5E)" d="M2.5 9.534c0-.248.2-.448.448-.448h3.104a.448.448 0 110 .896H2.948a.448.448 0 01-.448-.448zM3.5 10.034h2v4.637a1 1 0 11-2 0v-4.637z"/><path fill="#fff" fill-rule="evenodd" d="M13 6.959c1.196-.656 2-1.882 2-3.286C15 1.906 13.725.421 12 0v2.673a1 1 0 11-2 0V0C8.275.421 7 1.906 7 3.673c0 1.404.804 2.63 2 3.286V14a2 2 0 104 0V6.959z" clip-rule="evenodd"/><path fill="var(--isp-icons-main-color, #344A5E)" d="M13 6.959l-.48-.877-.52.285v.592h1zM12 0l.237-.971L11-1.273V0h1zm-2 0h1v-1.273l-1.237.302L10 0zM9 6.959h1v-.592l-.52-.285-.48.877zm4.48.877C14.968 7.02 16 5.476 16 3.673h-2c0 1.006-.575 1.912-1.48 2.409l.96 1.754zM16 3.673c0-2.272-1.634-4.125-3.763-4.644L11.763.97C13.084 1.294 14 2.411 14 3.673h2zM11 0v1.777h2V0h-2zm0 1.777v.896h2v-.896h-2zm0 .896v2a2 2 0 002-2h-2zm0 0H9a2 2 0 002 2v-2zm0 0V0H9v2.673h2zM9.763-.97C7.633-.451 6 1.4 6 3.673h2c0-1.262.916-2.379 2.237-2.702L9.763-.97zM6 3.673c0 1.802 1.033 3.348 2.52 4.163l.96-1.754C8.576 5.585 8 4.679 8 3.673H6zM10 14V6.959H8V14h2zm1 1a1 1 0 01-1-1H8a3 3 0 003 3v-2zm1-1a1 1 0 01-1 1v2a3 3 0 003-3h-2zm0-7.041V14h2V6.959h-2z" mask="url(#m-tool_a)"/></g></symbol>

  <symbol id="link" viewBox="0 0 16 16" fill="none"><g clip-path="url(#p-permalink_clip0)"><path fill="#fff" stroke="var(--isp-icons-main-color, #344A5E)" d="M15.154 8.028c0 4.004-3.207 7.24-7.152 7.24-3.944 0-7.152-3.236-7.152-7.24S4.058.788 8.002.788c3.945 0 7.152 3.236 7.152 7.24z"/><g mask="url(#p-permalink_a)"><path fill="#fff" stroke="var(--isp-icons-main-color, #344A5E)" d="M11.328 8.028c0 2.077-.417 3.933-1.068 5.252-.668 1.35-1.496 1.988-2.258 1.988s-1.59-.639-2.257-1.988c-.651-1.319-1.069-3.175-1.069-5.252s.418-3.933 1.07-5.252C6.411 1.427 7.24.789 8.001.789c.762 0 1.59.639 2.258 1.988.651 1.319 1.068 3.175 1.068 5.252z"/><path stroke="var(--isp-icons-main-color, #344A5E)" d="M8.002 5.98c-2.037 0-3.857-.502-5.151-1.288C1.547 3.902.85 2.877.85 1.836c0-1.04.697-2.065 2-2.857 1.295-.785 3.115-1.287 5.152-1.287s3.857.502 5.152 1.287c1.303.792 2 1.816 2 2.857 0 1.04-.697 2.065-2 2.856-1.295.786-3.115 1.288-5.152 1.288zM8.002 16.816c-2.051 0-3.884-.421-5.185-1.08-1.33-.672-1.967-1.51-1.967-2.29s.637-1.618 1.967-2.29c1.301-.658 3.134-1.08 5.185-1.08 2.052 0 3.884.422 5.185 1.08 1.33.672 1.967 1.51 1.967 2.29s-.637 1.618-1.967 2.29c-1.3.659-3.133 1.08-5.185 1.08z"/></g><path fill="var(--isp-icons-main-color, #344A5E)" stroke="#fff" stroke-linecap="round" d="M9 13.5c0-.195.03-.31.054-.371a.218.218 0 01.059-.091A.996.996 0 009 13.5zm0 0c0 .195.03.31.054.371a.218.218 0 00.059.091A.996.996 0 019 13.5zm5 0c0 .167-.04.324-.113.462a.217.217 0 00.059-.09c.024-.063.054-.177.054-.372zm0 0c0-.195-.03-.31-.054-.371a.217.217 0 00-.059-.091.996.996 0 01.113.462zM9.25 11c-.43 0-1.003.126-1.481.557C7.265 12.01 7 12.68 7 13.5c0 .82.265 1.49.769 1.943.478.431 1.052.557 1.481.557h1.5c.299 0 .567-.13.75-.338a.997.997 0 00.75.338h1.5c.43 0 1.003-.126 1.482-.557.503-.453.768-1.123.768-1.943 0-.82-.265-1.49-.768-1.943A2.219 2.219 0 0013.75 11h-1.5a.997.997 0 00-.75.338.997.997 0 00-.75-.338h-1.5z"/><path fill="#fff" d="M10 10.5h3v.5h-3v-.5z"/></g></symbol>
</svg>

Подключение:

<svg>
  <use xlink:href="/assets/icon-sprite.svg#home"></use>
</svg>

<svg>
  <use xlink:href="/assets/icon-sprite.svg#tool"></use>
</svg>

<svg>
  <use xlink:href="/assets/icon-sprite.svg#link"></use>
</svg>

Тут примерный проект.

Comments

[Ankhena]

Маски засунуть внутрь symbol не вариант?

[fu11buster]

Ankhena, нет, так не работает в Firefox )