Question

民间，

我在使用带有剪切路径的符号的SVG精灵时遇到问题。看起来这是一个已知问题但我无法通过阅读现有文档找出解决方案。

我有一个名为icon.svg的SVG精灵文件;内容如下所示：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="bell" viewBox="0 0 22 22" preserveAspectRatio="xMinYMax meet">
    <path d="M17.3 8.8c0-2.9-2.3-5.3-5.3-5.7v-.2c0-.5-.5-.9-1-.9s-1 .4-1 .9v.2c-3 .4-5.4 2.8-5.3 5.7C4.7 14.7 2 14 2 15.7c0 2.5 2.6 1.9 6.1 1.5v.3c0 1.4 1.3 2.5 2.9 2.5 1.6 0 2.9-1.1 2.9-2.5v-.3c3.5.4 6.1 1 6.1-1.5 0-1.8-2.7-.8-2.7-6.9zm-4.8 8.7c0 .6-.7 1.1-1.5 1.1s-1.5-.5-1.5-1.1c0-.2 0-.3.1-.4h2.6c.2.1.3.3.3.4z"/>
  </symbol>
  <symbol id="lock" viewBox="0 0 20 22" preserveAspectRatio="xMinYMax meet">
    <clipPath id="lock-clip">
      <path d="M16.4 8.2h-1.2V7c0-2.7-2.3-5-5.2-5-2.9 0-5.2 2.2-5.2 5v1.2H3.6c-.6 0-1.1.5-1.1 1V19c0 .6.5 1 1.1 1h12.8c.6 0 1.1-.5 1.1-1V9.2c0-.6-.5-1-1.1-1zM7.5 7c0-1.3 1.1-2.3 2.5-2.3s2.5 1 2.5 2.3v1.2h-5V7zm1 9.6l.8-3c-.4-.2-.7-.6-.7-1.1 0-.7.6-1.3 1.4-1.3s1.4.6 1.4 1.3c0 .5-.3.9-.7 1.1l.8 3h-3z"/>
    </clipPath>
    <path d="M-3.4-3.6h26.7v29.1H-3.4z" clip-path="url(#lock-clip)"/>
  </symbol>
  <symbol id="envelope" viewBox="0 0 30 22" preserveAspectRatio="xMinYMax meet">
    <path d="M3 19h24V4.8l-12 6.7L3 4.8"/>
    <path d="M15 9.7L27.4 3H2.6"/>
  </symbol>
</svg>

现在我在我的标记中引用此SVG如下：

<svg role="img" preserveAspectRatio="xMinYMin meet">
   <use xlink:href="/src/assets/svgs/icons/icons.svg#bell" />
</svg>
<svg role="img" preserveAspectRatio="xMinYMin meet">
   <use xlink:href="/src/assets/svgs/icons/icons.svg#lock" />
</svg>

第一个正确显示但第二个没有显示。经过进一步的发现，我发现剪辑路径和SVG精灵存在某种问题。

有没有解决方法？我做错了吗？

剪辑路径在SVG精灵中不起作用

0 个答案: