SVG中的剪切路径在Safari中不起作用 [英] Clipping path in SVG not working in Safari
问题描述
我在Illustrator中创建了一个简单的多边形,然后在图像前创建了一个剪切路径(蒙版)。我将它作为SVG文件导出,并在Chrome和Safari中完美呈现。然而,当我使用SVG数据创建HTML文件时,它完美呈现而不是 Safari 6.0.2。
不太清楚我可能做错了什么;我创建了SVG示例(个人网站)和HTML(关于jsfiddle的示例)。
您必须在Safari中遇到一个错误,而不是使用 use
应用蒙版,只需使用实际的多边形
元素即可:
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns:xlink =http://www.w3.org/1999/xlink x =0pxy =0px
width =700pxheight =700pxviewBox =0 0 700 700style =enable-background:new 0 0 700 700; XML:空间= 保留 >
< 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.tifstyle =clip-path:url(#SVGID_2 _);>
< image style =overflow:visible; width =1024height =768id =Layer_0_1_xlink:href =http://fc05.deviantart.net/fs13/f/2007/071/9/e/Japanese_shiba_inu__shiba_dog__by_MogamiJ.jpgtransform =matrix (0.8418 0 0 0.8418 27.5078 37.498)>< / image>
< / g>
< / g>
< / svg>
这适用于Safari 6中的我。
I've created a simple polygon in Illustrator and then created a clipping path (mask) in front of an image. I've exported it as an SVG file, and it renders perfectly in Chrome and Safari.
However, when I create an HTML file using the SVG data, it renders perfectly in Chrome but not Safari 6.0.2.
Not quite sure what I might be doing wrong; I've created examples of the SVG example (personal site) and the HTML (example on jsfiddle).
You must be running into a bug in Safari, instead of using use
to apply the mask, just use the actual polygon
element:
<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>
This works for me in Safari 6.
这篇关于SVG中的剪切路径在Safari中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!