SVG要素にonclickイベントを追加する

Question

この例はSVGチュートリアルで見つかりました。これは、svg要素にonclickイベントハンドラを使用する方法を説明しています。以下のコードのようになります：

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> 

<script type="text/ecmascript"><![CDATA[ 
function changerect(evt) 
{ 
var svgobj=evt.target; 
svgstyle = svgobj.getStyle(); 
svgstyle.setProperty ('opacity', 0.3); 
svgobj.setAttribute ('x', 300); 
} 
]]> 
</script> 

<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100' 
height='100' /> 
</svg> 

しかし、これはうまくいかないようです。要素をクリックしても何も起こりません。

おそらく、エコーを使用してPHPスクリプトの内部からsvgを表示していることは重要です。

XMLHttpRequest() 

これはおそらくそれを行うには何も持ってもらえ：PHPスクリプトによって生成されたコンテンツは、AJAXを使用して、ページになるとことも ？助けてくれてありがとう。

Answer 1

JavaScriptを実行するには、すべてのjavascriptをsvgの中に組み込む必要があります。外部関数やライブラリを参照できませんでした。これは、あなたのコードがsvgstyle = svgobj.getStyle();に壊れていたことを意味しました。

これはあなたの試行を行います。

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> 

<script type="text/ecmascript"><![CDATA[ 
    function changerect(evt) { 
     var svgobj=evt.target; 
     svgobj.style.opacity= 0.3; 
     svgobj.setAttribute ('x', 300); 
    } 
]]> 
</script> 

<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> 
</svg> 

Answer 2

Demo in JSFiddle

var XMAX = 500; 
var YMAX = 500; 
var _xx=10; 
var _reg=100; 
var _l=10; 
// Create PATH element 
for(var x=1;x<20;x++) 
{ 
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
pathEl.setAttribute('d','M'+_l+' 100 Q 100 300 '+_l+' 500'); 
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)'; 
pathEl.style.strokeWidth = '5'; 
pathEl.style.fill = 'none'; 
    $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})}); 

$('#mySvg').append(pathEl); 
_l+=50; 
} 

Answer 3

<use>にclassName/idを追加してください。あなたはSVGスクリプトのスコープの外で検出している場合や、また、実際のSVGパス/要素を使用します

<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg> 

Answer 4

を使用すると、SVGの特定の部分をクリックする必要がない場合、これは可能な解決策かもしれません。

divを上に置き、そのdivにイベントを追加します。 svg要素がhtml構造体のdivタグの前にある場合、z-indexは不要です。

HTML

<div class='parent'> 
    <div class='parent-events'></div> 
    <div class='my-svg'><svg></svg></div> 
</div> 

CSS

.parent { 
    position: relative; 
} 

.my-svg { 
    position: relative; 
    z-index: 0; 
} 

.parent-events { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 1 
} 

Javascriptを

const eventArea = document.querySelector('.parent-events'); 
eventArea.addEventListeners('click',() => { 
    console.log('clicked'); 
});