mic*_*ael 2 php safari doctype svg clipping
我创建了一个使用 raphaeljs 库绘制各种 SVG 元素的页面，但我在 Safari 中遇到了一些问题。
我正在绘制图像并使用剪切路径来掩盖某些区域。然后，用户可以点击这些图像“浏览”到放置在后面的其他图像。
这在 Firefox 和 Chrome 甚至 IE 中都能正常工作。但在 Safari 中我无法点击浏览图像。剪切路径似乎在 Safari 中不起作用。
我通过这个问题发现Safari 的内容类型必须设置为“application/xhtml+xml”，因为它不使用 html5 解析器。
我已经尝试过将其放在页面顶部的建议......
<?php
header('Content-type: application/xhtml+xml');
?>
...但是浏览器只输出 html 文件。
我只是想知道我需要什么文档类型才能使 safari 正确绘制嵌入 SVG，例如 chrome 和 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（从 v 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>