Safari embeded SVG doctype

 

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);
}

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>

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>

The following works for me in Safari 5.0.5, MacOSX 10.5 and mobile Safari on iPad. I'm using JQuery to parse the SVG XML out of a string and raphaelJS to do the heavy lifting on the SVG side of things. Clicks can be handled with the click() function from jQuery, or the mouse event handling in 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)')

In my case I was embeding the .svg into the HTML code. Putting the type="image/svg+xml" attribute into the <embed> tag was enough to see the image on safari (mobile). I didn't test on laptop.

链接地址: http://www.djcxy.com/p/47038.html

上一篇: Chrome浏览器没有以图片/ svg + xml格式加载SVG文件

下一篇: Safari嵌入了SVG文档类型