Safari embeded doctype SVG

J'ai créé une page qui attire les différents éléments SVG à l'aide de la raphaeljs de la bibliothèque, mais je vais avoir quelques questions dans Safari.

Je dessine des images et à l'aide d'un tracé de détourage pour masquer certaines zones. L'utilisateur peut ensuite cliquer sur 'par' ces images à d'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 par le biais de cette question que le type de contenu avec Safari doit être réglé sur "application/xhtml+xml" comme il n'est pas à l'aide d'un parser html5.

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

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

...mais le navigateur juste sorties du fichier html.

Je me demandais simplement ce qu'doctype j'ai besoin de faire un safari tirage embeded SVG correctement, comme chrome et firefox?

C'est la façon dont je m'inspire de mes images SVG, et il fonctionne très bien sur 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);
}
InformationsquelleAutor michael | 2011-06-16
  1. 4

    Vous dites que vous voulez Safari pour intégrer du SVG correctement. Si par là tu veux dire inline SVG, sachez alors que Safari (comme de v 5.0.5) ne peut pas le faire. C'est, par exemple, n'est 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 tu veux intégrer du SVG à l'aide d'un élément HTML, puis Safari peuvent le faire. Prenez le code SVG, le mettre dans un fichier appelé "cercle.svg" et puis l'incorporer à l'aide de l'un 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>
    • Je suis en utilisant raphaeljs pour l'installation de la toile et à l'aide de la fonction ci-dessus pour dessiner, il travaille à l'exception, vous ne pouvez pas cliquer sur le clip de chemin d'accès aux éléments de derrière. Donc inline SVG n'est pas entièrement pris en charge dans Safari. Merci pour l'aide
    InformationsquelleAutor james.garriss
  2. -1

    Les ouvrages suivants, pour moi dans Safari 5.0.5, MacOSX 10.5 et mobile Safari sur l'iPad. J'utilise JQuery pour analyser le SVG XML d'une chaîne et raphaelJS faire le gros du travail sur le SVG côté des choses.
    Les clics peuvent être traitées avec la souris() la fonction de jQuery ou de la souris de la gestion des événements 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)')
    InformationsquelleAutor Rob Sanderson
  3. -1

    Dans mon cas, j'ai été embeding l' .svg dans le code HTML. Mettre le type="image/svg+xml" attribut dans le <embed> balise était assez pour voir l'image sur safari (mobile). Je n'ai pas fait de test sur ordinateur portable.

    InformationsquelleAutor vicgilbcn