svgタグで描画した画像がsafari(ios chrome)だと欠ける

やりたかったこと

↓のようなsvgタグを使って、snap.svgでモーフィングさせる。

<svg viewBox="0 0 200 200">
  <clipPath class="mask">
    <path d="M59.8,-20.9C65.6,-1.7,50.1,22.9,28.5,38.4C6.9,53.9,-20.8,60.3,-36.3,49.2C-51.9,38.1,-55.4,9.5,-47.3,-12.9C-39.2,-35.2,-19.6,-51.4,3.7,-52.6C27,-53.8,54,-40.1,59.8,-20.9Z" />
  </clipPath>
</svg>

現象

safari（ios chrome）で描画したい画像が欠けた。
その他ブラウザでは問題無し。

解決方法

svgにcssでbackground-color、もしくはbackground-imageを指定したら解消した。
※ただし、↓のように透明背景では解消できなかった。

background-color:transparent;
background-color:rgba(255,255,255,0);

そのため、背景透過（普通の場合は背景透過で使いたいですよね）をしたい場合は「透明な画像」を配置すると解消できます。

推測

推測でしかありませんが、safari(ios chrome)ではsvgに背景をつけないとsvgの描画領域を確保できないのではと考えています。

吐き出し

safari嫌い
IE並に嫌い