Safari嵌入SVG文档类型 [英] Safari embeded SVG doctype
问题描述
我已经创建了一个页面，该页面使用raphaeljs库绘制了各种SVG元素，但是我在Safari中遇到了一些问题.
I have created a page that draws various SVG elements using the raphaeljs library, but I'm having some issues in Safari.
我正在绘制图像，并使用剪切路径遮盖某些区域.然后，用户可以将这些图像浏览"到后面的其他图像.
I am drawing images and using a clipping path to mask certain areas. The user can then click 'through' these images to other images placed behind.
这在Firefox和chrome，甚至IE中都可以正常工作.但是在Safari中，我无法单击图像.剪切路径似乎在Safari中不起作用.
This works as expected in firefox and chrome, and even IE. But in Safari I cannot click through the images. The clipping path doesn't seem to work in Safari.
我通过这个问题发现了Safari的内容类型必须将其设置为"application/xhtml + xml"，因为它没有使用html5解析器.
I have discovered through this question that the content-type with Safari has to be set to "application/xhtml+xml" as it is not using a html5 parser.
我尝试了将其放在页面顶部的建议...
I've tried the suggestion putting this at the top of my page...
<?php
header('Content-type: application/xhtml+xml');
?>
...但是浏览器只是输出html文件.
...but the browser just outputs the html file.
我只是想知道我需要什么样的文档类型才能正确地进行Safari浏览器内嵌SVG，例如chrome和firefox?
I'm just wondering what doctype I need to make safari draw embeded SVG properly, like chrome and firefox?
这就是我绘制SVG图像的方式，并且在chrome和firefox中可以正常工作
This is how I'm drawing my SVG images, and it works fine in chrome and firefox
function myDraw(path, url, x, y, w, h, id){
//create clipPath Element
var clippath = document.createElementNS("http://www.w3.org/2000/svg","clipPath");
clippath.setAttribute("id", id);
svgcanv.appendChild(clippath);
//draw the path
var cp=paper.path(path).translate(x, y).attr({stroke: 0});
$(cp.node).appendTo('#'+id+'');
//assoc clipPath with image
var img = paper.image(url,x,y,w,h);//.attr({fill:"#111",opacity:0.7});
img.node.setAttribute("clip-path","url(#"+id+")");
img.node.setAttribute("class",id);
}
推荐答案
您说您想让Safari正确嵌入SVG.如果您的意思是内联SVG，那么请知道Safari(自v.0.5.5起)无法做到这一点.例如，这不受支持:
You say that you want Safari to embed SVG properly. If by that you mean inline SVG, then know that Safari (as of v 5.0.5) can't do it. This, for example, is not supported:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
但是，如果您的意思是使用HTML元素嵌入SVG，那么Safari可以做到这一点.以SVG代码为例，将其放入一个名为"circle.svg"的文件中，然后使用以下三个元素中的任何一个将其嵌入:
But if you mean embed SVG using an HTML element, then Safari can do this. Take the SVG code, put it in a file called "circle.svg" and then embed it using any of these three elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<embed src="circle.svg" type="image/svg+xml"></embed>
<object data="circle.svg" type="image/svg+xml"></object>
<iframe src="circle.svg"></iframe>
</body>
</html>
这篇关于Safari嵌入SVG文档类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
