Safari嵌入了SVG文档类型
我创建了一个使用raphaeljs库绘制各种SVG元素的页面，但我在Safari中遇到了一些问题。
我正在绘制图像并使用剪切路径来遮罩某些区域。 用户可以点击这些图像“通过”来放置在后面的其他图像。
这在firefox和chrome，甚至IE中都可以正常工作。 但在Safari中，我无法点击图片。 剪切路径在Safari中似乎不起作用。
我通过这个问题发现，Safari的内容类型必须设置为“application / xhtml + xml”，因为它不使用html5解析器。
我已经尝试了将此置于页面顶部的建议...
<?php
header('Content-type: application/xhtml+xml');
?>
...但浏览器只是输出html文件。
我只是想知道什么doctype我需要使Safari浏览器正确地绘制嵌入SVG，如铬和Firefox？
这是我如何绘制我的SVG图像，并且它在Chrome和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（5.0.5版本之前）无法做到这一点。 例如，这不被支持：
<!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”的文件中，然后使用以下三个元素中的任何一个来嵌入它：
<!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 5.0.5，MacOSX 10.5和iPad上的移动Safari。 我使用JQuery从字符串和raphaelJS中解析出SVG XML，从而在SVG方面做了大量工作。 可以使用jQuery中的click（）函数或RaphaelJS中的鼠标事件处理来处理点击。
// svg is a string that contains an SVG path for clipping
SVG_NS = "http://www.w3.org/2000/svg";
pth = $.parseXML(svg)
doc = $(pth)
// Find the actual element, this may not be the most efficient method
pthelm = null;
doc.children().each(function() {pthelm = this;});
// Duplicate into the document's DOM for webkit
npth = document.createElementNS(SVG_NS, pthelm.nodeName)
for (a in pthelm.attributes) {
attr = pthelm.attributes[a];
npth.setAttribute(attr.nodeName, attr.nodeValue);
}
pthelm = npth;
cpe = document.createElementNS(SVG_NS, 'clipPath')
cpe.setAttribute('id', 'svgclippath');
cpe.appendChild(pthelm);
paper.canvas.appendChild(cpe);
img = "http://example.org/path/to/your/image.jpg";
iw = 100; // Image Width
ih = 200; // Image Height
x = svgcanvas.image(img, 0, 0, iw, ih)
x.node.setAttribute('preserveAspectRatio', 'none')
x.node.setAttribute('clip-path', 'url(#svgclippath)')
在我的情况下，我将.svg嵌入到HTML代码中。 将type="image/svg+xml"属性放入<embed>标记足以在safari（mobile）上看到图像。 我没有在笔记本电脑上测试。