एसवीजी तत्व

Question

पर ऑनक्लिक घटना जोड़ें मुझे यह उदाहरण एक एसवीजी ट्यूटोरियल में मिला, जो बताता है कि आप एक svg तत्व के लिए ऑनक्लिक ईवेंट हैंडलर का उपयोग कैसे कर सकते हैं। यह नीचे दिए गए कोड की तरह दिखता है:

<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 प्रदर्शित कर रहा हूं। इसके अलावा कि PHP स्क्रिप्ट द्वारा उत्पन्न सामग्री AJAX और उपयोग कर पृष्ठ में लाया जाता है: यह शायद इसके साथ कोई लेना देना सका

XMLHttpRequest() 

? मदद के लिए बहुत - बहुत शुक्रिया।

Answer 1

ऐसा प्रतीत होता है कि सभी जावास्क्रिप्ट को चलाने के लिए 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 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

: या भी वास्तविक एसवीजी पथ/तत्व का उपयोग करने के लिए, आप एसवीजी स्क्रिप्ट दायरे के बाहर का पता लगाने कर रहे हैं

शीर्ष पर एक div डालें और उस div में ईवेंट जोड़ें। यदि एसवीजी तत्व HTML संरचना में div टैग से पहले है तो z-index की आवश्यकता नहीं है।

एचटीएमएल

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

सीएसएस

.parent { 
    position: relative; 
} 

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

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

जावास्क्रिप्ट

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