Safari嵌入式SVG文档类型

我已经创建了一个使用raphaeljs库绘制各种SVG元素的页面，但我在Safari中遇到了一些问题。Safari嵌入式SVG文档类型

我正在绘制图像并使用剪切路径来遮罩某些区域。用户可以点击这些图像“通过”来放置在后面的其他图像。

这可以在firefox和chrome甚至IE中按预期工作。但在Safari中，我无法点击图片。剪切路径在Safari中似乎不起作用。

我通过this question发现，Safari的内容类型必须设置为“application/xhtml + xml”，因为它不使用html5解析器。

我试过的建议把这个在我的页面的顶部...

<?php 
header('Content-type: application/xhtml+xml'); 
?>

...但浏览器只是输出HTML文件。

我只是想知道我需要什么的doctype，让Safari正确绘制嵌入式SVG，如Chrome和Firefox？

这是我怎么拉我的SVG图像，并且在镀铬正常工作和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); 
}

来源

2011-06-16 michael

你说你想要的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>

来源

2011-06-16 18:55:09

我使用raphaeljs设置画布和使用上述函数来绘制，它的工作原理除非你不能通过剪辑路径元素点击后面。所以内联SVG在Safari中不完全支持。谢谢您的帮助 – michael 2011-06-17 08:28:25

-1

在Safari 5.0.5，MacOSX的10.5和Safari移动对我来说，以下的作品在iPad上。我使用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)')

来源

2011-07-01 18:00:36

-1

在我的情况下，我将.svg嵌入到HTML代码中。将type="image/svg+xml"属性放入<embed>标记足以在safari（移动设备）上看到图像。我没有在笔记本电脑上测试。

来源

2014-08-16 10:42:48 vicgilbcn

Safari嵌入式SVG文档类型

回答

相关问题