4

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

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

不太确定我可能做错了什么；我创建了 SVG 示例（个人网站）和 HTML（jsfiddle 上的示例）的示例。

4

5 回答 5

7

您必须在 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 中对我有用。

于 2013-01-17T17:38:58.493 回答
3

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

于 2017-05-22T15:14:40.933 回答
1

Safari 不是 SVG 中的 clipPaths 的忠实拥护者。相反，当嵌入到老式<Object>元素中时，它可以完美地工作。不过，为了做到这一点，我需要使用 PHP 标头来定义正确Content-type的application/xhtml+xml. 没有它，所提供的只是text/htmlSafari（和旧版本的现代浏览器）将不会显示 SVG。

为了将 PHP 与 SVG 一起使用，我需要在我的网络服务器配置文件中添加两个附加项。在 Apache 中，我将类型添加psvg到我的 mime-type 文件中，以便相关行如下所示： 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>

瞧，到处都可以使用 svg 剪贴蒙版，甚至是 Mobile Safari。

于 2013-01-17T17:40:38.730 回答
0

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

<defs><clipPath></clipPath></defs>
于 2013-01-17T23:04:46.600 回答
0

我设法解决了这个问题，使用了 a: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;
}
于 2017-04-07T14:53:44.190 回答