我试图在我的项目中使用svg精灵，它工作得很好，除非你使用蒙版精灵中的标签:
公共/sprite.svg:
<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或将精灵放入标记中时，一切都很好。问题可能是巴别塔，因为我检查了香草JS，它是一样的。有人能帮帮我吗?
https://codesandbox.io/s/epic-darwin-0n5uk5
目前外部<use>元素不支持掩码或clippath
作为一种解决方法，您可以使用cssmask-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;
}
Mask from data 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;
}