Safari eingebettete SVG-doctype

Habe ich eine Seite erstellt, die zieht verschiedene SVG-Elemente mit der Bibliothek raphaeljs, aber ich habe einige Probleme mit Safari.

Ich bin zeichnen von Bildern-und mit einem clipping-Pfad zu Maske bestimmte Bereiche. Der Benutzer kann klicken Sie auf 'über' diese Bilder mit anderen Bildern platziert hinter sich.

Diese wie erwartet funktioniert in firefox und chrome und sogar IE. Aber in Safari kann ich nicht klicken Sie sich durch die Bilder. Der clipping-Pfad scheint nicht zu funktionieren in Safari.

Habe ich entdeckt durch diese Frage, dass der content-type mit Safari muss auf "application/xhtml+xml", da es nicht mit einem html5-parser.

Ich habe versucht den Vorschlag, die Umsetzung dieses, an der Spitze meiner Seite...

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

...aber der browser nur Ausgänge der html-Datei.

Ich Frage mich nur, welchen doctype muss ich safari draw eingebettete SVG-richtig, wie chrome und firefox?

Dies ist, wie ich die Zeichnung meine SVG-Bilder, und es funktioniert in chrome und 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

    Ihnen sagen, Sie möchten, dass Safari zum einbetten von SVG-richtig. Wenn du meinst, die inline-SVG, dann wissen Sie, dass Safari (ab v 5.0.5) Sie können es nicht tun. Dies ist beispielsweise nicht unterstützt:

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

    Aber wenn du meinst das einbetten von SVG mit HTML-element, dann Safari kann dies tun. Nehmen Sie den SVG-code, legen Sie Sie in eine Datei namens "Kreis.svg", und Betten Sie es mit einer der folgenden drei Elemente:

    <!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>
    Ich bin mit raphaeljs, um den setup-Leinwand und die Verwendung der oben genannten Funktion zu zeichnen, es funktioniert, bis Sie nicht klicken Sie sich durch den clip-Pfad für Elemente hinter sich. So ist inline-SVG nicht in vollem Umfang unterstützt in Safari. Danke für die Hilfe

    InformationsquelleAutor james.garriss

  2. -1

    Folgende funktioniert bei mir im Safari 5.0.5, MacOSX 10.5 und mobile Safari auf dem iPad. Ich bin mit JQuery Parsen der SVG-XML aus einem string und raphaelJS zu tun, die schweres heben auf der SVG-Seite der Dinge.
    Klicks kann behandelt werden mit der click () - Funktion von jQuery oder die Maus-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)')

    InformationsquelleAutor Rob Sanderson

  3. -1

    In meinem Fall war ich embeding .svg in HTML-code. Putting die type="image/svg+xml" Attribut in der <embed> tag war genug, um zu sehen, das Bild auf safari (mobile). Habe ich nicht getestet auf dem laptop.

    InformationsquelleAutor vicgilbcn

Schreibe einen Kommentar