Html SVG中的剪辑路径在Safari中不起作用_Html_Svg_Safari_Clipping

Html SVG中的剪辑路径在Safari中不起作用

html svg safari

Html SVG中的剪辑路径在Safari中不起作用,html,svg,safari,clipping,Html,Svg,Safari,Clipping,我在Illustrator中创建了一个简单的多边形，然后在图像前面创建了一个剪切路径（遮罩）。我已将其导出为SVG文件，并在Chrome和Safari中完美呈现但是，当我使用SVG数据创建HTML文件时，它在Chrome中呈现得非常完美，而不是Safari 6.0.2 不太确定我可能做错了什么；我已经创建了SVG示例（）和HTML（）的示例您必须在Safari中遇到错误，而不是使用use应用掩码，只需使用实际的多边形元素： <svg version="1.1" id="Layer_1"

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

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

不太确定我可能做错了什么；我已经创建了SVG示例（）和HTML（）的示例

您必须在Safari中遇到错误，而不是使用

use

应用掩码，只需使用实际的

多边形

元素：

<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>

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

这对我在Safari 6中很有用。

Safari不太喜欢SVG中的Clippath。相反，当嵌入到一个老式的

元素中时，它可以完美地工作。为了做到这一点，我需要使用PHP头来定义正确的

内容类型

，即

application/xhtml+xml

。如果没有它，只提供

text/html

，Safari（以及现代浏览器的旧版本）将无法显示SVG

为了将PHP与SVG结合使用，我需要向我的Web服务器配置文件添加两个附加项。在Apache中，我将类型

psvg

添加到我的mime类型文件中，因此相关行如下所示：

image/svg+xml-svg-svgz-psvg

接下来，我必须在Apache配置文件中添加一个额外的SVG处理程序，以便相关的行如下：

AddType应用程序/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>

<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文件数据

然后，我创建了一个名为index.php的新.php文件，它如下所示：

<?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>

<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剪辑面具，甚至是移动Safari。

您应该将

clipPath

元素包装在

defs

元素中：

<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>

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

我设法解决了这个问题，在之前使用了一个

：并对其应用了剪辑和颜色：
.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;
}

还要注意html中是否有base标记，因为safari显然会将base添加到id选择器。
hey@ErikDahlström，对不起，我应该澄清一下。最新版本的safari 6.0.2中出现了这种情况。一般来说，最好不要将文件打包为zip文件，因为解压缩文件需要一段时间，所以很少有人会尝试。对于这样的问题，请将您的示例放在一个实时站点或JSFIDLE上。谢谢@halfer，我感谢您的提示。我做了一个编辑，添加了到examples.Dang的链接，这比我的答案简单。我喜欢它。我将在其他浏览器中测试以确认，然后我将接受。谢谢你的帮助！啊，但是您的答案很有趣，因为它指出了问题的根源：Safari没有找到引用，除非它作为xhtml使用。我想，即使只是通过.htaccess指令将html作为xhtml提供，也会起作用。嗯，当然，我想也是这样。尽管如此，您的解决方案不需要任何服务器脚本。我没有太多的遮罩需要使用，我现在将使用这条路线，稍后可能需要返回到xhtml修复。再次感谢！这是一个很好的问题，可以作为评论来回答。