mask-imageでのCORSエラー

mask-imageを使ったSVGアイコンの設定をした際、クライアント環境にアップするとうまく表示されないということがあったので備忘録としてメモ。

うまくいかなかった例

原因としてはタイトルにある通りCORSエラーが原因で、閲覧している環境とSVGのある環境が異なるドメインの場合、SVGのある環境の方で設定を行っていないと表示ができません。
別ドメインのSVGでmask-imageを試してみます。

<button class="btn-search">
  <span class="visually-hidden">検索</span>
</button>

.btn-search {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background: transparent;

  width: 32px;
  height: 32px;
}
.btn-search::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  mask-image: url(https://test.cly7796.net/blog/sample/cors-error-with-mask-image/icon_search.svg);
  mask-size: contain;
  background-color: red;
}

SVGアイコンが表示されず、consoleに以下のようなエラーが出るのを確認できます。
別ドメインのSVGを使用するデモページ

Access to image at 'https://test.cly7796.net/blog/sample/cors-error-with-mask-image/icon_search.svg' from origin 'https://cly7796.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

今回の場合はクライアント環境がCMS管理になっていて、画像やCSSなどのアセット類は別サーバ(CDN)にアップされ、HTML内のパスが別サーバの絶対パスに置換される仕組みだったため発生していました。
別サーバ側の設定の変更ができなかったため、mask-imageを使わない形での実装にし直すことで解消しました。