jQueryでRaphael SVGイメージを変更する

Question

私は円弧のtextPathラベルを生成する必要がある小さなアプリケーションを持っています。私はRaphaelを介してアークを描いており、それは素晴らしい作品です。しかし、RaphaelはtextPathsをサポートしていません。私たちはjQueryを使ってそれらをsvg要素に追加できますが、何らかの理由でレンダリングしません。動的に生成されたコードを静的に複製すると、うまく描画されます。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600"> 
    <desc>Created with Raphaël</desc><defs></defs> 
    <a title="This is a test entry"> 
    <path fill="none" stroke="#1e79a0" d="M395.2627944162883,355A110,110,0,0,1,199.5099996593139,344.74103073833805" style="stroke-width: 20px; " stroke-width="20" id="This_is_a_test_entry"></path> 
    </a> 
    <text> 
    <textpath xlink:href="#This_is_a_test_entry">This is a test entry</textpath> 
    </text> 
</svg> 

上記のコードでは、円弧のラベルが表示されません。以下は、ハードコーディングされているしかしときには、期待通りにレンダリング：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600"> 
    <a title="Bacon"> 
    <path id="Arc" fill="none" stroke="#1e79a0" d="M395.2627944162883,355A110,110,0,0,1,201.13265490709162,348.2208261467985" style="stroke-width: 20;" stroke-width="20"> 
    </path> 
    </a> 
    <text> 
    <textPath xlink:href="#Arc">This is an Arc</textPath> 
    </text> 
</svg> 

私ははるかに高く評価されるだろう私の全体のSVGを見ていないよ理由として任意の洞察力を。

EDIT：

私はJavaScriptに変更を加えたし、私はそれがほとんどそこだと思うけどtextPathはまだ表示されません。主にFemiのおかげで、現在のコードは次のようになります。textPathには0x0の境界ボックスがありますが、textPathには境界ボックスがあります。

Answer 1

にanglebannersoncurves。私はまだ何が欠けていたのか分かりませんが、textPathsがレンダリングされ、皆が満足しています。誰もが助けてくれてありがとう。

Answer 2

最初のサンプルに表示されているxlinkを削除するか、適切なXML名前空間定義を追加する必要があります。

EDIT：textPath要素を追加するときは、正しい要素名（textPath、textpathではなく）を使用する必要があります。

EDIT：やや面白いですが、ブラウザとjQueryを組み合わせてパスを変更しています。 、右事を得る（jquery's append not working with svg element?への回答から遊離する）この機能を使用するには：

function makeSVG(tag, attrs){ 
    var el= document.createElementNS('http://www.w3.org/2000/svg', tag); 
    for (var k in attrs) 
    el.setAttribute(k, attrs[k]); 
    return el; 
} 

そして、この操作を行います。

var paper = Raphael("notepad", 320, 200); 

// do all your other stuff here 
... 

var text = makeSVG("text", {}); 
     var c = makeSVG("textPath", {"xlink:href":"#Arc"}); 
     c.appendChild(document.createTextNode("This is an Arc")); 
     text.appendChild(c); 
paper.canvas.appendChild(text); 

を

することはあなたの権利SVGを取得すること：しかし、それをそれでも奇妙な権利を引き出すことはありません。

Answer 3

あなたの仕事についてのあなたの心配していないが、IE8で動作していないか、それ以前の理由textpath をサポートして木材のjqueryのSVGプラグインをキース使用しないプラグインのパス構文はSVGプラグインが美しい放射状を提供ラファエル から変換するために異なるが簡単であるならばこれが私が今関わっている理由です。

すべての文字を含むカーブに耳を傾けずにテキストにしたい場合は、Rapに滞在して、これを使用することができます。http：//irunmywebsite.com/raphael/additionalhelp.php？v = 1 & q =ラファエルhereにパッチを見つけ、それが働いているパッチに小さな微調整を行った後、

言い訳スペルのiPod初心者だから、

Answer 4

フェミの答えはかなり良いですが、唯一の欠点は、それを再描画してxlink名前空間を設定することです。

私は根本的な理由は分かりませんが、SVGキャンバスが更新されないようにRaphaelの中核をなすものでなければなりません。描画を修正するために必要なのは、 DOMからSVG要素をreadding：

$('#myRaphaelDiv').html($('#myRaphaelDiv').html()); 

SVGの直接のハッキングではなく、VMLを使用してブラウザ（ため息、IE）との互換性を壊すだろう属性ことに留意すべきです。私はまだVMLでテキストパスを行う方法を調べていません。以下のコードは完全性のためのものです。

// add the new namespace attribute to the SVG canvas. 'raphael' is the Raphael instance. 
// note that this only needs to be done once. 
$(raphael.canvas).attr('xmlns:xlink', "http://www.w3.org/1999/xlink"); 

// draw the curved text 
var lblId = 'some_unique_dom_id'; 
var path = raphael.path().attr({ 
    stroke : 'none' // defaults to black 
    // ...other path attributes used in generating it... 
}); 
var label = raphael.text().attr({ 'text-anchor' : 'start' }); 

// create and inject raw SVG textPath element 
var link; 
try { 
    link = document.createElementNS('http://www.w3.org/2000/svg', 'textPath'); 
} catch (e) { 
    // no createElementNS() method is pretty much synonymous with using IE, so 
    // this is where you would do your VML version of a text path 
    alert("Your browser does not support SVG, please use Firefox, Chrome etc"); 
} 
link.setAttribute('xlink:href', '#' + lblId); 
link.appendChild(document.createTextNode("path-oriented text")); 

// finally, force a redraw of the SVG document. 
// Obviously, you would defer this until all elements had been added. 
$('#myRaphaelDiv').html($('#myRaphaelDiv').html());