SVG 画像の xlink:href 設定に失敗しました_html/css_WEB-ITnose

同社の比較的頻繁なビジネスニーズでは、地図上に地域情報をマークする必要がありますが、互換性の問題を考慮して、実際の開発では、関連するインタラクションのために raphael.js を通じて地図情報が描画されます

製品部門の同僚が懸命に SVG マップを描画しました。マップタイルと実際の市外局番の関係は設定できますが、関連する情報を設定するツールを使用するだけです

最近、実際にnode-webkit +を使用しています。新しいプロジェクトがあります マップ構成をアップグレードする必要があります + avalon.js を読んだ後、構成ツールをアップグレードする予定です 完了したらこれを共有します ちなみに、埋められた落とし穴も共有します。最近

背景に長い時間を費やしたので、本題に入りましょう

SVG画像のxlink:href設定に失​​敗しました

実際、avalonを使用する場合、ポイントを表示するためにSVGノードにピクチャを導入する必要があり、グラフィックスはレベル属性を通じて動的に変更されます

<image ms-if-loop="el.shap == 'centre'" ms-attr-x="el.x" ms-attr-y="el.y" width="10" height="10" ms-attr-xlink:href="{{el.level}}.png"  style="cursor: pointer;" />

レベル値を変更しても反映されません 長い間調べましたが、情報が失敗し、最終的に試してみたところ、xlink:hrefに関連するものが必要であることがわかりました。最初のデフォルト値は、テンプレートがノードを生成したときに実際には使用できなかったので、xlink:href 属性を手動で追加しました。