1

私は積極的に（そして何時間も）ウェブでこれに対する答えを検索しましたが、あえて尋ねると見つけることができませんでした. JSでプログラミングしてSVGを作成するためのライブラリであるRaphael.jsを使用しています。リンクに図形を埋め込みたい。

SVG では、名前空間が SVG タグに追加され、xlink の使用を通知します。

xmlns:xlink="http://www.w3.org/1999/xlink"

次に、たとえば、リンクに埋め込まれた形状を作成することができます (この優れたブログ tutorials.jenkov.com/svg/a-element.html ):

<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="/svg/index.html" target="_top">
        <rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"/>
    </a>
</svg>

</body></html>

ここにフィドルがあります：小さな長方形

Raphael ライブラリ (および私の例では jquery) を使用すると、コードは次のようになります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="jquery.js"></script>
<script src="raphael.js"></script>
</head>
<body>
<div id="my-canvas"></div>
</body>
<script type="text/javascript">
var jq = jQuery.noConflict();

var paper = Raphael('my-canvas', 500, 300);      
jq('svg').attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');

var rec = paper.rect(10, 20, 75, 30);
rec.attr('fill', '#6666cc');
rec.attr('stroke', '#333366');

var l = jq('<a xlink:href="#"></a>');      
jq(rec.node).wrap(l);

</script>
</html>

そして、ここにフィドルがあります：ここを見てください

問題は、それが機能しないことです。このコードは次の行まで実行されました。

rec.attr('stroke', '#333366');

完全に描画された形状を表示しますが、その後...消去されます。もう 1 つの興味深い点は、コード全体の実行後、つまり 2 行後に DOM ドキュメントが希望どおりであることを Firefox が示していることです (これは、私の評判では明らかに十分ではありません...)。しかし、簡単に再現できます。つまり、DOM ノードではっきりと確認できます。

<a xlink:href="/svg/index.html" target="_top">
    <rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"></rect>
</a>

誰かが私の過ちを教えてくれたら嬉しいです。

どうもありがとう

4

0 に答える 0