He creado una página que atrae a diversos elementos SVG utilizando el raphaeljs de la biblioteca, pero estoy teniendo algunos problemas en Safari.

Estoy dibujando imágenes y mediante un trazado de recorte para enmascarar ciertas áreas. El usuario puede, a continuación, haga clic en ‘a través de’ estas imágenes con otras imágenes coloca detrás.

Esto funciona como se espera en firefox y chrome, e incluso IE. Pero en Safari no puedo hacer clic a través de las imágenes. El trazado de recorte parece que no funciona en Safari.

He descubierto a través de esta pregunta que el tipo de contenido con Safari tiene que estar configurado en «application/xhtml+xml» como no está utilizando un html5 analizador.

He probado la sugerencia de poner esto en la parte superior de mi página…

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

…pero el navegador envía el archivo html.

Me pregunto qué tipo de documento necesito para hacer safari dibujar incrustadas SVG correctamente, como chrome y firefox?

Esto es cómo voy a dibujar mis imágenes SVG, y funciona bien en chrome y 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

3 Comentarios

  1. 4

    Usted dice que quiere Safari para incrustar SVG correctamente. Si por que te refieres en línea SVG, entonces sabemos que Safari (como la de v 5.0.5) no puede hacerlo. Este, por ejemplo, no es compatible:

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

    Pero si te refieres a incrustar SVG utilizando un elemento HTML, luego Safari puede hacer esto. Tomar el código SVG, colocar en un archivo llamado «círculo.svg» y, a continuación, insertar el uso de cualquiera de estos tres elementos:

    <!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>
    • Estoy usando raphaeljs para la instalación de la lona y el uso de la función anterior para dibujar, funciona excepto que usted no haga clic a través de la ruta de los clips a los elementos detrás. Así que en línea SVG no es totalmente compatible con Safari. Gracias por la ayuda
  2. -1

    La siguiente me funciona en Safari 5.0.5, MacOSX 10.5 y móvil de Safari en el iPad. Estoy usando JQuery para analizar el XML SVG de una cadena y raphaelJS a hacer el trabajo pesado en el SVG lado de las cosas.
    Los clics se puede manejar con el click() la función de jQuery, o el ratón, manejo de eventos en 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)')
  3. -1

    En mi caso me fue integrar la .svg en el código HTML. Poner el type="image/svg+xml" atributo en el <embed> etiqueta fue suficiente para ver la imagen en el safari (móvil). Yo no prueba en la computadora portátil.

Dejar respuesta

Please enter your comment!
Please enter your name here