Safari внедрил SVG Doctype - PullRequest
Новая
       28

Safari внедрил SVG Doctype

2 голосов
/ 16 июня 2011

Я создал страницу, которая рисует различные элементы SVG, используя библиотеку Raphaeljs, но у меня возникают некоторые проблемы в Safari.

Я рисую изображения и использую обтравочный контур для маскировки определенных областей.Пользователь может затем щелкнуть «сквозь» эти изображения для других изображений, размещенных позади.

Это работает, как и ожидалось, в Firefox и Chrome, и даже IE.Но в Safari я не могу кликать по изображениям.Кажется, что обтравочный контур не работает в Safari.

В этом вопросе я обнаружил, что для типа контента в Safari нужно установить значение "application / xhtml + xml" какон не использует синтаксический анализатор html5.

Я попытался предложить это в верхней части моей страницы ... 

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

... но браузер просто выводит htmlфайл.

Мне просто интересно, какой тип документа мне нужен, чтобы рисование сафари встраивалось в SVG правильно, например, в chrome и firefox?

Вот как я рисую свои SVG-изображения, и это работаетштраф в хром и 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);
}

Ответы [ 3 ]

4 голосов
/ 16 июня 2011

Вы говорите, что хотите, чтобы Safari правильно встраивал SVG.Если под этим вы подразумеваете встроенный SVG, то знайте, что Safari (начиная с версии 5.0.5) не может этого сделать.Это, например, не поддерживается: 

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

Но если вы имеете в виду встраивание SVG с использованием HTML-элемента, тогда Safari может сделать это.Возьмите код SVG, поместите его в файл с именем circle.svg и вставьте его, используя любой из этих трех элементов: 

<!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>
0 голосов
/ 16 августа 2014

В моем случае я встраивал .svg в код HTML. Поместив атрибут type="image/svg+xml" в тег <embed> было достаточно, чтобы увидеть изображение в сафари (мобильном). Я не тестировал на ноутбуке.

0 голосов
/ 01 июля 2011

Следующее работает для меня в Safari 5.0.5, MacOSX 10.5 и мобильном Safari на iPad. Я использую JQuery для анализа SVG XML из строки, а RaphaelJS - для тяжелой работы на стороне SVG. Клики можно обрабатывать с помощью функции click () из jQuery или обработкой событий мыши в 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)')
...