5

私は次のマークアップを持っています（ネイティブSVGを使用したHTML）：

<!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>
    ...

jsメソッドは、線といくつかの<use href="infotop">要素を#outSvg（グラフになるために）出力します。要素には、<use>ツールチップを表示するためのonmouseover-Eventsがあります。

onmouseover-functionさて、 iの座標を取得することになると、<use>問題が発生します。

値を取得するために、次のさまざまなアプローチを試しました。

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、O11.61、IE9

質問：

getAttribute()他のブラウザで失敗するのはなぜですか？重要なものが欠けていますか？クロスブラウザの値を取得するための一貫した方法はありますか？（との間のスイッチを介してのほかevt.target.xにevt.target.correspondingUseElement.x）

重要：バニラjsのみで、ブラウザスイッチについては知っていますが、それは重要ではありません。時間があればすぐに、必要に応じてフィドルを提供します。最後に-これを読んでくれてありがとう！

編集：*js-errorsを追加しました

EDIT2：**FFは他のブラウザ以外のオブジェクトを返します

4

4 に答える 4

7

さて、ErikDahlströmsの回答を読んだ後、FFの動作が間違っていることに気づきました。Use-ElementではなくElement-Instanceを直接返す必要があります。

現在、次のコードを使用しています。

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

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

getAttribute()このようにして、すべてのブラウザで一貫して属性を取得できます。

于 2012-02-18T12:35:12.497 に答える
2

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

于 2012-02-15T08:53:59.160 に答える
2

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

検証するためのw3cSVG1.1SecondEditionテストスイートからのSVGElementInstanceのいくつかのテストを次に示します。

SVGElementInstanceが存在しない場合は、フォールバックソリューションを提供する必要があります。これは、検出するのに十分簡単です。例：

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

要素がSVGElementInstanceの場合はcorrespondingUseElementプロパティがあり、そうでない場合はプロパティがありません。通常のsvg要素にはこのプロパティがなく、使用されているインスタンスにのみこのプロパティがあります。

于 2012-02-15T21:07:22.593 に答える
0

やってみましたevt.target.getAttributeNS(evt.target.parent.namespaceURI,"x")か？

于 2012-02-14T11:58:31.413 に答える