He creado una página que dibuja varios elementos SVG usando la biblioteca raphaeljs, pero tengo algunos problemas en Safari.

Estoy dibujando imágenes y usando un trazado de recorte para enmascarar ciertas áreas. El usuario puede hacer clic en "a través de" estas imágenes a otras imágenes ubicadas detrás.

Esto funciona como se esperaba en Firefox y Chrome, e incluso en IE. Pero en Safari no puedo hacer clic en las imágenes. El trazado de recorte no parece funcionar en Safari.

He descubierto a través deesta pregunt que el tipo de contenido con Safari debe establecerse en "application / xhtml + xml" ya que no está utilizando un analizador html5.

He intentado la sugerencia poniendo esto en la parte superior de mi página ...

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

... pero el navegador solo genera el archivo html.

Me pregunto qué tipo de documento necesito para hacer que el safari dibuje SVG incrustado correctamente, como Chrome y Firefox.

Así es como estoy dibujando 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);
}