Я создал страницу, которая рисует различные элементы SVG, используя библиотеку raphaeljs, но у меня есть некоторые проблемы в Safari.
Я рисую изображения и используя обтравочный контур для маскировки определенных областей. Затем пользователь может нажать «через» эти изображения на другие изображения, расположенные позади.
Это работает как в Firefox, так и в Chrome, и даже IE. Но в Safari я не могу щелкнуть изображения. Обходной путь, похоже, не работает в Safari.
Я обнаружил по этому вопросу, что тип содержимого с Safari должен быть установлен в «application / xhtml + xml», поскольку он не использует парсер html5.
Я пробовал предложение, помещая это в начало моей страницы …
<?php header('Content-type: application/xhtml+xml'); ?> … но браузер просто выводит html-файл.
Мне просто интересно, какой doctype мне нужно сделать, чтобы сделать сафари встраивать SVG правильно, например, chrome и firefox?
Вот как я рисую SVG-изображения, и он отлично работает в chrome и 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); }
Вы говорите, что хотите, чтобы 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>
Следующее работает для меня в 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)')
В моем случае я вставлял .svg в HTML-код. Поместить атрибут type="image/svg+xml" в <embed> было достаточно, чтобы увидеть изображение на сафари (мобильном телефоне). Я не тестировал ноутбук.