2

我创建了一个使用 raphaeljs 库绘制各种 SVG 元素的页面，但我在 Safari 中遇到了一些问题。

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

这在 Firefox 和 chrome 甚至 IE 中都可以正常工作。但在 Safari 中，我无法单击图像。剪切路径似乎在 Safari 中不起作用。

我通过这个问题发现，Safari 的内容类型必须设置为“application/xhtml+xml”，因为它没有使用 html5 解析器。

我已经尝试过将其放在页面顶部的建议...

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

...但浏览器只输出 html 文件。

我只是想知道我需要什么 doctype 才能使 safari draw 正确嵌入 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);
}
4

3 回答 3

5

您说您希望 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>
于 2011-06-16T18:55:09.443 回答
-1

以下适用于 Safari 5.0.5、MacOSX 10.5 和 iPad 上的移动 Safari。我正在使用 JQuery 从字符串中解析 SVG XML，并使用 raphaelJS 来完成 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-01T18:00:36.287 回答
-1

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

于 2014-08-16T10:42:48.080 回答