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。

Answer 2

还要注意你的html中是否有基本标记，因为safari显然会将基础添加到id选择器。

Answer 3

Safari并不是SVG中clipPaths的忠实粉丝。相反，它嵌入在旧学校<Object>元素中时非常有效。为了做到这一点，我需要使用PHP标头来定义Content-type application/xhtml+xml。没有它，所有服务都是text/html，其中Safari（以及旧版本的现代浏览器）不会显示SVG。

为了将PHP与SVG一起使用，我需要在我的webservers配置文件中添加两个附加内容。在Apache中，我将类型psvg添加到我的mime类型文件中，以便相关的行如下所示： image/svg+xml svg svgz psvg

接下来，我必须在Apache配置文件中添加一个额外的SVG处理程序，以便相关的行读取如下：AddType application/x-httpd-php .php .php4 .phtml .psvg，以便任何.psvg文件呈现为PHP。

所以我创建了一个名为faces.psvg的新文件，它看起来像这样：

<?php
    header("Content-type: image/svg+xml");
    print('<?xml version="1.0" encoding="iso-8859-1"?>');
?>
<svg version="1.1"> //your svg file data </svg>

然后我创建了一个名为index.php的新.php文件，它看起来像这样：

<html>
<head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
     <object type="image/svg+xml" data="faces.psvg" width="1120" height="800"></object>
</body>
</html>

和voilá，到处都是svg剪辑蒙版，甚至是Mobile Safari。

Answer 4

您应该将clipPath元素包含在defs元素中：

<defs><clipPath></clipPath></defs>

Answer 5

我设法解决了这个问题，使用了:before并将剪辑和颜色应用于：

.field_captioned_carousel .teaser>.teasertextbg:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-clip-path: polygon(70px 0%,100% 0,100% 100%,0 100%,0 70px);
    clip-path: polygon(50px 0%,100% 0,100% 100%,0 100%,0 50px);
    background-color:#ff0000;
}

SVG中的剪切路径在Safari中无法正常工作

5 个答案: