2

raphaeljs ライブラリを使用してさまざまな SVG 要素を描画するページを作成しましたが、Safari でいくつかの問題が発生しています。

画像を描画し、クリッピング パスを使用して特定の領域をマスクしています。ユーザーは、これらの画像をクリックして、背後にある他の画像に移動できます。

これは、Firefox と Chrome、さらには IE でも期待どおりに機能します。しかし、Safari では画像をクリックすることができません。Safari でクリッピング パスが機能しないようです。

この質問を通じて、Safari の content-type は html5 パーサーを使用していないため、「application/xhtml+xml」に設定する必要があることを発見しました。

これを私のページの一番上に置くという提案を試みました...

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

...しかし、ブラウザはhtmlファイルを出力するだけです。

chromeやfirefoxのように、Safariに埋め込まれたSVGを適切に描画させるために必要なDoctypeは何ですか？

これは私が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);
}
4

3 に答える 3

5

あなたは、Safari に SVG を適切に埋め込んでほしいと言っています。インライン SVG を意味する場合は、Safari (v 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>

しかし、HTML 要素を使用して SVG を埋め込む場合は、Safari でこれを行うことができます。SVG コードを取得し、「circle.svg」というファイルに入れ、次の 3 つの要素のいずれかを使用して埋め込みます。

<!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>
于 2011-06-16T18:55:09.443 に答える
-1

以下は、Safari 5.0.5、MacOSX 10.5、および iPad のモバイル Safari で機能します。私は JQuery を使用して文字列から SVG XML を解析し、raphaelJS を使用して SVG 側の重労働を行っています。クリックは、jQuery の click() 関数、または 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)')
于 2011-07-01T18:00:36.287 に答える