javascript - クリックハンドラ element

Question

要素を使用して<svg:svg> </svg:svg>も Safari や Chrome では何もレンダリングされないようですが、使用すると問題なく<svg> </svg>動作します。ただし、追加は要素onclickでのみ機能します。<svg:svg>これを行う適切な方法は何ですか？

この jsfiddleは問題を示しています (Safari/Chrome と Firefox を比較してください)。

Answer 1

さて、SVG を作成する最初の方法はonclick、描画された部分のみを作成することがわかりました。つまり、実際に何かいいことができるということです (あなたの場合は役に立たないかもしれません)。

このフィドルでは、2 つの別々onclickの を作成しました。1 つは特に図面をクリックするとトリガーされ (見やすいように大きくしました)、もう 1 つは SVG ボックスをクリックするとトリガーされ、その周りにコンテナーを配置します。

HTML :

<div id="svgContainer">
    <svg id="firstSVG" class="s" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="25" fill="red"/>
    </svg>
</div>

JS:

document.getElementById('firstSVG').addEventListener('click', function (event) {
  document.getElementById("output").innerHTML = "Click works here too !";  

}, false);
document.getElementById('svgContainer').addEventListener('click', function (event) {
  document.getElementById("output").innerHTML = "Well, a container seems better.";  

}, true);

したがって、基本的には SVG の周りにコンテナを使用するか、図面をクリックするだけです