以下svg在chrome和firefox中工作,但在Safari中不起作用。我无法在ie中测试它。
Safari会显示图片,但不会应用蒙版。
<div class="widget-image-l">
<svg width="645px" height="470px" viewBox="0 0 645 470" version="1.1">
<g stroke="none" fill-rule="evenodd">
<mask id="mask" fill="white">
<path d="M38.5969948,-2.22080132e-11 C16.8456745,30.2125678 3.07305242,70.3781435 0.923015792,123.840504 C-7.15396842,324.681101 174,465.890038 341,469.890015 C508,473.889991 658.942386,367.295224 643.971193,180.147362 C637.875363,103.946248 607.401187,44.0482171 563.7625,-2.35331754e-11 L38.5969948,-1.42108547e-14 Z" id="path"></path>
</mask>
<g mask="url(#mask)">
<image x="-1020" y="0" width="1867.94872" height="470" xlink:href="http://www.castleknockhotel.com/cmsGallery/imagerow/5904/resized/1600x400/cycling_passion_of_life_high_resolution_wallpaper_for_desktop_background_download_cycling_images_free.jpg" transform="scale(-1 1)">
</image>
</g>
</g>
</svg>
</div>