Safari 嵌入 SVG 文档类型

发布于 2024-11-15 21:16:34 字数 1223 浏览 6 评论 0原文

我创建了一个使用 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);
}

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城凉梦凉人心 2024-11-22 21:16:34

您说您希望 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>

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>

回复收藏 0 原文

温柔嚣张 2024-11-22 21:16:34

以下内容适用于 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)')

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)')

回复收藏 0 原文