Safari embarqué SVG doctype

J'ai créé une page qui dessine divers éléments SVG en utilisant la librairie raphaeljs, mais j'ai quelques problèmes avec Safari.Safari embarqué SVG doctype

Je dessine des images et j'utilise un masque pour masquer certaines zones. L'utilisateur peut ensuite cliquer sur «à travers» ces images pour les autres images placées derrière.

Cela fonctionne comme prévu dans Firefox et Chrome, et même IE. Mais dans Safari, je ne peux pas cliquer sur les images. Le chemin de détourage ne semble pas fonctionner dans Safari.

J'ai découvert grâce à this question que le type de contenu avec Safari doit être défini sur "application/xhtml + xml" car il n'utilise pas d'analyseur html5.

J'ai essayé la suggestion de mettre ce en haut de ma page ...

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

... mais le navigateur envoie simplement le fichier html. Je me demandais juste quel doctype je dois faire pour que safari dessine SVG incorporé correctement, comme chrome et firefox?

Voici comment je dessine mes images SVG, et il fonctionne très bien en chrome et 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); 
}

Source

2011-06-16 michael

Vous dites que vous voulez Safari pour intégrer SVG correctement. Si vous voulez dire SVG en ligne, alors sachez que Safari (à partir de v 5.0.5) ne peut pas le faire. Ceci, par exemple, ne sont pas pris en charge:

<!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>

Mais si vous voulez dire SVG en utilisant un élément Embed HTML, puis Safari peut le faire. Prenez le code SVG, le mettre dans un fichier appelé « circle.svg », puis l'incorporer en utilisant l'une de ces trois éléments:

<!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>

Source

2011-06-16 18:55:09

J'utilise raphaeljs pour configurer le canevas et en utilisant la fonction ci-dessus pour dessiner, cela fonctionne, sauf que vous ne pouvez pas cliquer à travers le chemin du clip pour les éléments derrière. Donc, SVG en ligne n'est pas entièrement pris en charge dans Safari. Merci pour l'aide – michael

-1

Les œuvres suivantes pour moi dans Safari 5.0.5, MacOSX 10.5 et Safari mobile sur iPad. J'utilise JQuery pour analyser le XML SVG d'une chaîne et raphaelJS pour faire le gros du côté SVG. Les clics peuvent être gérés avec la fonction click() de jQuery ou la gestion des événements de la souris dans 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)')

Source

2011-07-01 18:00:36

-1

Dans mon cas, je suis le plongement .svg dans le code HTML. Mettre l'attribut type="image/svg+xml" dans l'étiquette <embed> était suffisant pour voir l'image sur le safari (mobile). Je n'ai pas testé sur un ordinateur portable.

Source

2014-08-16 10:42:48 vicgilbcn

Safari embarqué SVG doctype

Répondre

Questions connexes