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文檔類型

回答

相關問題