読む私は次のマークアップ（ネイティブSVGとHTML）を有するJS

介してHTMLにSVG-要素の属性：読む私は次のマークアップ（ネイティブSVGとHTML）を有するJS

<!doctype html> 
    <!-- ...  
     html-Elements 
     ... --> 
    <svg version="1.1" ... > 
     <defs> <circle id="infop" cx="0" cy="0" r="9" /> </defs> 
     <!-- ... 
      svg Elements 
      ... --> 
     <svg> <!-- to have separate coordinate-system --> 
      <g id="outSvg"></g> 
     </svg> 
    ...

A JS-方法はグラフになるために（#outSvgにラインと複数<use href="infotop">要素を出力します）。 <use>要素には、ツールチップを表示するonmouseover-Eventsがあります。今

、それは私が問題に実行<use>のonmouseover-functionの座標を取得することになる：

私は値を取得するには、以下の様々なアプローチを試してみました：

function showInfo(evt){ 

    console.log("target: "+evt.target); 
    console.log("AttrNS: "+evt.target.getAttributeNS(null,"x")); 
    console.log("Attrib: "+evt.target.getAttribute("x")); 
    console.log("basVal: "+evt.target.x.baseVal.value); 
    console.log("corrEl: "+evt.target.correspondingUseElement.x.baseVal.value);

生産出力：

//target -> ** [object SVGUseElement] in FF, in all other browsers: [object SVGElementInstance]) 
    //AttrNS -> Works only in FF 
     // * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttributeNS' 
    //Attrib -> Works only in FF 
     // * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttribute' 
    //basVal -> works only in FF 
     // * Uncaught TypeError: Cannot read property 'baseVal' of undefined 
    //corrEl -> fails in FF but works in Ch, O and IE

ブラウザ：FF10、Ch16、O 11.61、IE9

質問：

なぜgetAttribute()他のブラウザで失敗？私は何か重要なものを逃しています値を取得する一貫した方法はありますかクロスブラウザ？

重要

（evt.target.xとevt.target.correspondingUseElement.xの間にスイッチを介してほか）：バニラのみJS、と私はbrowserswitchesについて知っている、ポイントをないthatsの！私は時間を見つけるとすぐに、必要に応じてフィドルを提供します。最後に、これを読んでいただきありがとうございます！

EDIT：* JS-エラー

EDIT2を追加しました：** FFは

出典

2012-02-14 Christoph

あなたは既に方法を見つけたようです。 'target.x'か' target.correspondingUseElement.x'のどちらかを使います。 SVG属性アクセス用のラッパー関数を作成することは困難ではありません。 –

まあ、私はあなたの解決策がむしろ満足していないと感じます... – Christoph

@Christoph、人々は自由のためにあなたを助けるために自分の時間を過ごします。あなたは感謝してはいけませんか？ –

まあ、ErikDahlströmsの答えを読んだ後、私はFFが間違っていることに気づいた。 Use-Elementの代わりにElement-Instanceを直接返す必要があります。

私は今、次のコードを使用します。私はすべてのブラウザで一貫しgetAttribute()を経由して属性を取得することができます

var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target; 

console.log(el.getAttribute("x"));

この方法です。

出典

2012-02-18 12:35:12 Christoph

あなたがevt.target.getAttributeNS(evt.target.parent.namespaceURI,"x")を試してみました他のブラウザよりも、別のオブジェクトを返しますか？

出典

2012-02-14 11:58:31 mihai

'evt.target.getAttributeNS（null、" x "）;'は同じことを行い、他のブラウザではsvgElementがメソッドに従っていないように見えます。 – Christoph

これを試すことができますか？ evt.target.getAttributeNode("x").nodeValue。私はサファリ、クロム、Firefoxでうまく動作しようとしました。

出典

2012-02-15 08:53:59 rajkamal

は 'TypeError：no such method'も投げます。私はそれのためにフィドルを用意するつもりだと思う。 – Christoph

私が知る限り、FirefoxはSVGElementInstanceをサポートしていません。ここで

は確認するために、W3C SVG 1.1 Second EditionのテストスイートからSVGElementInstanceのテストのカップルです：

あなたは何をすべきでありSVGElementInstanceが存在しない場合、検出するのに十分簡単な代替ソリューションを提供します。例：

if (elm.correspondingUseElement) { 
    /* elm is a used instance, not a real element */ 
} else { 
    /* fallback solution */ 
}

要素がSVGElementInstanceの場合は、correspondingUseElementプロパティがあります。それ以外の場合は、その要素はありません。通常のsvg要素はこのプロパティを持たず、使用されたインスタンスだけがそれを持ちます。

出典

2012-02-15 21:07:22

あなたのヒントとtestuitesへのリンクに感謝します。 – Christoph

読む私は次のマークアップ（ネイティブSVGとHTML）を有するJS

答えて

関連する問題