4

次の例では、link タグを svg 要素に動的に追加しようとしています。

http://lizziemalcolm.com/svgtest.html

$('#button').click(function(){
    $('.svgClass').wrap('<a xlink:href="http://www.w3.org/" />');
});

この例では、構文はまったく同じですが、動的にリンクが追加された楕円が消えます。

なぜこれが起こっているのでしょうか？

私がこれを試みている理由は、SVG を使用してカスタムhttp://www.addthis.com/アイコンを作成したいためであり、要素をタグで囲む必要があります。

純粋なjavascriptでも試しましたが、うまくいきませんでした:

function wrapElem( innerId, wrapType, wrapperId, wrapperUrl ){
    var innerElem = document.getElementById( innerId ),
    wrapper = document.createElement( wrapType );  
    wrapper.appendChild( innerElem.parentNode.replaceChild( wrapper, innerElem ) );
    wrapper.setAttribute('xml:id', wrapperId); 
    wrapper.setAttribute('xlink:href', wrapperUrl); 
    return wrapper;
}

リンクも更新

4

1 に答える 1

1

ルート SVG タグ (xmlns および xmlns:link) に名前空間が欠落している可能性があります。それが違いを生むかどうかはわかりませんが、試してみる価値があります。

それでも問題が解決しない場合は、2 つのリンクが機能していることを示す簡単な例を次に示します。

http://www.w3.org/2004/CDF/TestSuite/WICD_CDR_WP1/test-scalable-icon2.xhtml

両方のリンクに一意の ID を使用するので、おそらくそれも試してみる価値があります! :)

お役に立てれば！

アンディ。

アップデート

円を削除して再度ラップに追加すると、jQuery は SVG 要素を適切に処理できないようです。残念ながら、jQuery は DOM への SVG 要素の追加をサポートしていないようです。

これらの SO の質問は、同じ問題に答えます。

jqueryの追加はsvg要素で機能しませんか? Javascript を使用して SVG グラフィックを作成しますか?

于 2012-06-20T11:06:31.443 に答える