Babel.js 如果从外部svg-sprite文件使用svg中的掩码标记，则会忽略该标记

e1xvtsh3 于 2022-12-08 发布在 Babel

关注(0)|答案(1)|浏览(170)

我尝试在我的项目中使用svg sprite，它工作正常，除非您在sprite中使用mask标记：

公共/精灵.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>

源代码/应用程序.js：*

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

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

所以问题是所有浏览器都忽略了掩码，你得到的是错误的图像。奇怪的是，当你使用内联svg或者你把sprite放在标记里面的时候，一切都很好。问题可能出在babel上，因为我检查了vanilla JS，它是一样的。有人能帮助我吗？
https://codesandbox.io/s/epic-darwin-0n5uk5

babeljs

来源：https://stackoverflow.com/questions/72027981/mask-tag-in-svg-is-ignored-if-used-from-an-external-svg-sprite-file

1条答案

按热度按时间

eufgjt7s1#

当前，外部<use>元素中不支持掩码或clipPath。
作为一种解决方法，您可以使用css mask-image属性。您可以通过数据URL或使用外部文件包含遮罩形状。

外部：掩码.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;
}

HTML格式

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

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js 如果从外部svg-sprite文件使用svg中的掩码标记，则会忽略该标记

1条答案

相关问题

热门标签

最新问答