如果从外部svg-sprite文件中使用，则忽略svg中的掩码标记。

Question

我正试图在我的项目中使用sprite，它运行得很好，除非您在雪碧中使用掩码标记：

公众/私人/服务：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  <defs>

    <symbol viewBox="0 0 16 16" id='pharmacy'>
      <mask id="pathOne" fill="white">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z"/>
      </mask>
      <path d="M5 2V1H4V2H5ZM11 2H12V1H11V2ZM5 5V6H6V5H5ZM2 5L2 4L1 4V5H2ZM2 11H1V12H2V11ZM5 11H6V10H5V11ZM5 14H4V15H5V14ZM11 14V15H12V14H11ZM11 11V10H10V11H11ZM14 11V12H15V11H14ZM14 5H15V4H14V5ZM11 5H10V6H11V5ZM5 3H11V1H5V3ZM6 5V2H4V5H6ZM2 6L5 6V4L2 4L2 6ZM3 11V5H1V11H3ZM5 10H2V12H5V10ZM6 14V11H4V14H6ZM11 13H5V15H11V13ZM10 11V14H12V11H10ZM14 10H11V12H14V10ZM13 5V11H15V5H13ZM11 6H14V4H11V6ZM10 2V5H12V2H10Z" fill="#171717" mask="url(#pathOne)"/>
    </symbol>

  </defs> 
</svg>

src/App.js：

export default function App() {
  return (
    <div className="App">

      <svg width="16px" height="16px">
        <use href="/sprite.svg#pharmacy" />
      </svg>
      
    </div>
  );
}

所以问题是，在所有的浏览器中，掩码都被忽略了，而你却得到了错误的图像。奇怪的是，当您使用内联svg或将您的sprite放入标记中时，一切都正常。问题可能出在babel，因为我签了香草JS，这是一样的。有人能帮我吗？

https://codesandbox.io/s/epic-darwin-0n5uk5

Answer 1

目前，外部clipPaths元素中不支持掩码或<use>。

作为解决办法，您可以使用css mask-image属性。您可以通过数据Url包括掩码形状，也可以使用外部文件。

外部: mask.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <path d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z" />
</svg>

css:

.masked-external {
  -webkit-mask-image: url("mask.svg");
  mask-image: url("mask.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
}

来自数据Url的掩码：

.masked {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z' /%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

<svg class="masked" viewBox="0 0 16 16">
     <use href="sprite.svg#pharmacy" />
</svg>