首页 > 编程语言> > php – Safari嵌入了SVG doctype

php – Safari嵌入了SVG doctype

2019-10-02 09:30:52 作者：互联网

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

我正在绘制图像并使用剪切路径来屏蔽某些区域.然后,用户可以将这些图像“点击”到后面放置的其他图像.

这在firefox和chrome,甚至是IE中都可以正常工作.但在Safari中,我无法点击图片.剪切路径似乎在Safari中不起作用.

我通过this question发现,使用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);
}

解决方法:

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

标签：php,svg,safari,clipping,doctype
来源： https://codeday.me/bug/20191002/1842250.html