SVG内の要素に設定したfilterがSafariで効かない

SVG内の要素に対してCSSのfilterを設定した際、Safariで適用されないようだったので備忘録としてメモ。

サンプルコード

SVG内の各要素にclassを設定して、適用前のSVGと適用後のSVGを並べて比べてみます。
HTMLはblur()用のもののみ抜粋していますので、全体のHTMLはデモページを参照ください。

<svg width="400" height="500" viewBox="0 0 400 500">
  <rect width="50" height="50" x="50" y="50" fill="red" />
  <circle cx="150" cy="75" r="25" fill="blue" />
  <ellipse cx="250" cy="75" rx="50" ry="25" fill="green" />
  <path d="M320,50 l50,0 v50 h-25 Z" fill="yellow" />
  <line x1="50" y1="150" x2="150" y2="200" stroke="orange" />
  <polyline points="180,180 200,150 160,180 120,160" stroke="pink" fill="none" />
  <polygon points="230,180 250,150 280,180 330,160" stroke="purple" fill="none" />
  <text x="20" y="20">サンプルテキスト</text>
  <image xlink:href="img.jpg" width="400" height="267" x="0" y="220" />
</svg>
<svg width="400" height="500" viewBox="0 0 400 500">
  <rect class="blur" width="50" height="50" x="50" y="50" fill="red" />
  <circle class="blur" cx="150" cy="75" r="25" fill="blue" />
  <ellipse class="blur" cx="250" cy="75" rx="50" ry="25" fill="green" />
  <path class="blur" d="M320,50 l50,0 v50 h-25 Z" fill="yellow" />
  <line class="blur" x1="50" y1="150" x2="150" y2="200" stroke="orange" />
  <polyline class="blur" points="180,180 200,150 160,180 120,160" stroke="pink" fill="none" />
  <polygon class="blur" points="230,180 250,150 280,180 330,160" stroke="purple" fill="none" />
  <text class="blur" x="20" y="20">サンプルテキスト</text>
  <image class="blur" xlink:href="img.jpg" width="400" height="267" x="0" y="220" />
</svg>
〜 略 〜

SVG内に設定するフィルタを用意します。

.blur {
    filter: blur(5px);
}
.brightness {
    filter: brightness(0.6);
}
.contrast {
    filter: contrast(200%);
}
.drop-shadow {
    filter: drop-shadow(5px 5px 10px #333333);
}
.grayscale {
    filter: grayscale(100%);
}
.hue-rotate {
    filter: hue-rotate(120deg);
}
.invert {
    filter: invert(100%);
}
.opacity {
    filter: opacity(40%);
}
.saturate {
    filter: saturate(20%);
}
.sepia {
    filter: sepia(100%);
}

これでchromeやFirefoxではフィルタの適用が確認できましたが、Safariだと適用されないようでした。
SVG内の要素にfilterを設定するデモページ

svgタグに対してfilterを設定した場合、Safariでも適用されるようです。

<svg width="400" height="500" viewBox="0 0 400 500">
  <rect width="50" height="50" x="50" y="50" fill="red" />
  <circle cx="150" cy="75" r="25" fill="blue" />
  <ellipse cx="250" cy="75" rx="50" ry="25" fill="green" />
  <path d="M320,50 l50,0 v50 h-25 Z" fill="yellow" />
  <line x1="50" y1="150" x2="150" y2="200" stroke="orange" />
  <polyline points="180,180 200,150 160,180 120,160" stroke="pink" fill="none" />
  <polygon points="230,180 250,150 280,180 330,160" stroke="purple" fill="none" />
  <text x="20" y="20">サンプルテキスト</text>
  <image xlink:href="img.jpg" width="400" height="267" x="0" y="220" />
</svg>
<svg class="blur" width="400" height="500" viewBox="0 0 400 500">
  <rect width="50" height="50" x="50" y="50" fill="red" />
  <circle cx="150" cy="75" r="25" fill="blue" />
  <ellipse cx="250" cy="75" rx="50" ry="25" fill="green" />
  <path d="M320,50 l50,0 v50 h-25 Z" fill="yellow" />
  <line x1="50" y1="150" x2="150" y2="200" stroke="orange" />
  <polyline points="180,180 200,150 160,180 120,160" stroke="pink" fill="none" />
  <polygon points="230,180 250,150 280,180 330,160" stroke="purple" fill="none" />
  <text x="20" y="20">サンプルテキスト</text>
  <image xlink:href="img.jpg" width="400" height="267" x="0" y="220" />
</svg>

SVGにfilterを設定するデモページ
ただこの場合は全体にフィルタをかけることになるので、SVG内の一部のみに適用したい場合にはこの方法は使えません。