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.
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.
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');
?>
...but the browser just outputs the html file.
I'm just wondering what doctype I need to make safari draw embeded SVG properly, like chrome and 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);
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
