html - SVG 中的剪切路径在 Safari 中不起作用

Question

我在 Illustrator 中创建了一个简单的多边形，然后在图像前面创建了一个剪切路径(蒙版)。我已将它导出为 SVG 文件，它在 Chrome 和 Safari 中呈现完美。

但是，当我使用 SVG 数据创建 HTML 文件时，它在 Chrome 中呈现完美，但不是 Safari 6.0.2。

不太确定我可能做错了什么；我已经创建了 SVG 示例 ( personal site ) 和 HTML ( example on jsfiddle ) 的示例。

Answer 1

你一定是在 Safari 中遇到了一个错误，而不是使用 use 来应用蒙版，只需使用实际的 polygon 元素:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="700px" height="700px" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
  <g>  

    <clipPath id="SVGID_2_">
      <polygon id="SVGID_1_" points="576.35,444.245 670.595,350 576.349,255.754 576.349,123.651 444.246,123.651 350,29.405 255.755,123.651 122.96,123.651 122.96,256.446 29.405,350.001 122.96,443.555 122.96,577.041 256.446,577.041 350,670.595 443.554,577.041 576.35,577.041"/>
    </clipPath>

    <g id="LwhyVN.tif" style="clip-path:url(#SVGID_2_);">
      <image style="overflow:visible;" width="1024" height="768" id="Layer_0_1_" xlink:href="http://fc05.deviantart.net/fs13/f/2007/071/9/e/Japanese_shiba_inu__shiba_dog__by_MogamiJ.jpg"  transform="matrix(0.8418 0 0 0.8418 27.5078 37.498)"></image>
    </g>

  </g>
</svg>

这适用于 Safari 6。