We Keep Coding

Jquery onclick method is not working properly

I'm trying to make a search form. I want it to be like when I click in the search form opener button, the search form would show and its width would be 100%.
When I click it again the search form width would return to 0. The first one is working but when I click it back, the form is not set to width of 0.
app.js :
var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
e.preventDefault();
if(header_search_cont.css("width","0")){
header_search_cont.css("width","100%")
search_box.focus();
header_search_cont.css("opacity","1");
header_search_cont.css("transition","all .2s ease-in-out");
}else if(header_search_cont.css("width","100%")){
header_search_cont.css("width","0")
header_search_cont.css("opacity","0");
header_search_cont.css("transition","all .2s");
}
console.log("hhihihihi");
})
var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
e.preventDefault();
header_search_cont.css("width","0")
header_search_cont.css("opacity","0");
header_search_cont.css("transition","all .2s");
})
//search ends
<div id="header_search_cont" class="unstreched_search">
<form action="" method="post" name="search_form" id="search_form" enctype="multipart/form-data">
<button type="button" id="search_area_die"><svg id="search_die_svg" version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path
d="M501.333,245.333H36.417l141.792-141.792c4.167-4.167,4.167-10.917,0-15.083c-4.167-4.167-10.917-4.167-15.083,0l-160,160c-4.167,4.167-4.167,10.917,0,15.083l160,160c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L36.417,266.667h464.917c5.896,0,10.667-4.771,10.667-10.667S507.229,245.333,501.333,245.333z" />
</g>
</g>
</svg></button>
<input type="search" name="search_box" id="search_box" placeholder="Search..."><button id="searchbtn"
name="searchbtn"><svg class="search_ico_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792zM202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667
S302.646,384,202.667,384z" />
</g>
</g>
</svg></button></form>
</div>

Simple way is to use addClass() and removeClass() functions instead of using .css Then for if statement you can use if($(selector).hasClass())
var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
e.preventDefault();
if(!header_search_cont.hasClass('strech')){ //<< if not hasClass() strech
search_box.focus();
header_search_cont.addClass('strech'); // addClass()
}else{
header_search_cont.removeClass('strech'); // removeClass()
}
console.log("hhihihihi");
})
var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
e.preventDefault();
header_search_cont.removeClass('strech'); //<< removeClass()
})
//search ends
#header_search_cont{
width : 0px;
opacity : 0;
transition : all .2s ease-in-out;
overflow : hidden;
background : red;
padding : 10px;
box-sizing : border-box;
}
#header_search_cont.strech{
width : 100%;
opacity : 1;
transition : all .2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header_right_search_btn">Open Search</div>
<div id="header_search_cont">
<form>
<input id="search_box" type="search" placeholder="search" />
<input id="search_area_die" type="submit" value="search"/>
</form>
</div>
Explanation:
Add/remove class strech to the element on click
Check for strech class by using .hasclass('strech')) . The ! mark means NOT so !$(selector).hasClass('strech') means if the element doesn't have this class

Snap.SVG - Manipulate $(this) element

I have a problem with Snap.SVG and animation of multiple SVG elements.
I want to change path on hover, but i have many same SVG in html.
HTML:
var svg = $('.svg-wave');
var s = Snap(svg);
var simpleCup = Snap.select('.svg-wave-normal');
var fancyCup = Snap.select('.svg-wave-hover');
var simpleCupPoints = simpleCup.node.getAttribute('d');
var fancyCupPoints = fancyCup.node.getAttribute('d');
svg.mouseenter(function() {
simpleCup.animate({
d: fancyCupPoints
}, 600);
}).mouseleave(function() {
simpleCup.animate({
d: simpleCupPoints
}, 600);
});
svg .svg-wave-hover {opacity: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<div class="item">
<svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path>
<path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path>
</svg>
</div>
<div class="item">
<svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path>
<path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path>
</svg>
</div>
<div class="item">
<svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path>
<path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path>
</svg>
</div>
The problem is that when i hover last SVG, it animate the first one.
Can someone help me to change mouseenter/leave to work from $(this) ?

I'm going to suggest a way without using JQuery firstly, as it's not really necessary.
I would change your css to make the hover path display: none, rather than opacity: 0, as display none means that events will pass through fine, whereas opacity will capture them. Or you could reorder the paths, so the hove paths come first.
var normalWaves = Snap.selectAll('.svg-wave-normal');
var normalPoints = Snap.select('.svg-wave-normal').attr('d');
var hoverPoints = Snap.select('.svg-wave-hover').attr('d');
normalWaves.forEach(function( wave ) {
wave.mouseover(function() {
this.animate({
d: hoverPoints
}, 600);
})
.mouseout(function() {
this.animate({
d: normalPoints
}, 600);
});
});
svg .svg-wave-hover { display: none; }
jsfiddle

Works in codepen but not in Wordpress

I'm trying to get this animated svg tree to work in Wordpress. It works fine in codepen, but not at all in a Wordpress page on my localhost.
Can anyone see what is missing/wrong? In the page source code the javascript files are loading.
svg tree
var svg = $("#svg-container");
svg.children().find("path:not(.except)").click(function(e) {
$("#Layer_1 path").removeAttr("style");
$this = $(this);
var bbox = this.getBBox();
var centreX = bbox.x + bbox.width / 2;
var centreY = bbox.y + bbox.height / 2;
$this.css("transform-origin", centreX + 'px ' + centreY + 'px');
$this.css("transform", "scale(4)");
$this.css("stroke", "");
$this.css("fill", "");
this.parentElement.appendChild(this);
})
#svg-container {
width: 500px;
height: 500px;
}
#svg-container svg {
width: 100%;
height: 100%;
}
#font-face {
font-family: "Amaranth";
src: url('https://fonts.googleapis.com/css?family=Amaranth');
}
<div id="svg-container">
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<script type="text/javascript">
< ![CDATA[
]] >
</script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1247.24px" height="1360.63px" viewBox="0 0 1800 1400" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve">
<g>
<font>
<font-face font-family="Amaranth">
<font-face-src>
<font-face-uri xlink:href="https://fonts.googleapis.com/css?family=Amaranth" />
</font-face-src>
</font-face>
</font>
<text x="10" y="10" font-weight="bold" font-size="75" fill="#3ABDF2" font-family="Amaranth">The tree</text>
<path class="except" fill="#3E6325" d="m1175 917.29c-11.44-1.847-21.576 0.042-32.652 2.825-3.182 0.8-6.644 1.598-10.131 1.985 48.901-29.163 .....continued"
fill="#639357"
id="path5022" /><path
d="m604.1 171.56s-18.18-9.487-18.989-9.087c-0.812 0.401-2.108 1.365-0.619 2.624 1.491 1.259 18.873 8.725 20.208 8.689 1.331-0.037 1.5-1.57-0.6-2.226z"
fill="#3E6325"
stroke="#A64F2C"
stroke-miterlimit="10"
id="path5024" />
</g>
</svg>
</div>
https://codepen.io/paulfadams/pen/PRzMNE?editors=1111

I had this same issue once.
WordPress ships with its own version of the jQuery library.
Try using "jQuery" instead of just "$" sign.
For example:
var svg = $("#svg-container"); should be replaced with var svg = jQuery("#svg-container");

Use jQuery instead of the "$" sign. ex: jQuery("#svg-container");

img with SVG data URI won't display in Firefox

I am trying to display an image by setting the src attribute of an html <img> to the svg code I want to run. This works fine on chrome, but fails on firefox.
How can I modify this code to work on Firefox and Chrome?
Html:
<img></img>
Js:
src = 'data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 80 80" version="1.1" x="0px" y="0px"><path style="" d="m 11.958347,15.536432 c -0.417566,0.05245 -0.699072,0.416455 -1.333208,1.573186 -0.312318,0.53934 -0.674093,1.232201 -1.066567,2.026476 -0.05258,0.100663 -0.07769,0.133619 -0.133321,0.239978 -3.1051195,5.936663 -8.1858988,19.470857 -8.1858988,21.811287 0,0.146865 0.046316,0.296692 0.1333209,0.453291 0.00195,0.0074 -0.00212,0.01945 0,0.02666 0.026304,0.0454 0.04598,0.08678 0.079992,0.133321 0.069531,0.125808 0.1535797,0.233692 0.2933058,0.346634 0.1035412,0.08369 0.2057502,0.185432 0.3466341,0.293306 0.024887,0.01906 0.079075,0.0335 0.1066567,0.05333 0.106876,0.07683 0.2285881,0.179184 0.3732983,0.266642 0.6582732,0.435934 1.5688528,0.929375 2.7997373,1.519857 3.7990697,1.822505 8.1392307,3.232629 10.0790547,3.359685 0.0244,0.0036 0.05673,0.0236 0.07999,0.02666 0.01503,7.55e-4 0.03861,-5.86e-4 0.05333,0 0.137277,0.01568 0.25715,0.0335 0.346635,0.02666 0.595935,-0.04551 0.716019,-0.148104 1.4132,-1.253216 0.415447,-0.658532 1.041835,-1.762877 1.386537,-2.453103 1.64981,-3.303579 2.421859,-4.887803 3.01305,-5.546146 0.231428,0.09208 1.477919,0.582479 2.959723,1.173223 1.53711,0.612794 3.052262,1.211482 3.359685,1.306544 0.307421,0.09506 1.705565,0.716103 3.119707,1.386537 1.414142,0.670435 3.641698,1.658431 4.93287,2.213125 1.291173,0.554697 2.68742,1.192886 3.119708,1.413201 0.432283,0.220313 2.154789,0.950407 3.812975,1.626514 1.658184,0.676105 4.825899,1.983135 7.039341,2.906394 2.213438,0.923259 5.379258,2.17011 7.039339,2.746409 3.912624,1.358276 8.78521,3.271615 11.118957,4.372923 1.016873,0.47987 1.893422,0.879918 1.946484,0.879918 0.05306,0 1.042962,0.421177 2.186462,0.95991 1.1435,0.538734 2.215321,1.037141 2.399775,1.09323 0.17663,0.05372 0.362004,0.05673 0.533283,0.02667 0.0014,0.02596 -9.56e-4,0.05375 0.02666,0.07999 0.245796,0.233529 1.071763,-0.359152 1.813163,-1.306544 0.579482,-0.740489 1.085513,-1.933628 1.359873,-3.093043 0.0045,-0.01874 0.02236,-0.0346 0.02666,-0.05333 0.03069,-0.101602 0.02788,-0.193972 0.05333,-0.293306 0.07295,-0.284814 0.13554,-0.545543 0.159985,-0.799925 0.110747,-1.152584 -0.05807,-2.115011 -0.373298,-2.186462 -0.0079,-0.0091 -0.01848,-0.01795 -0.02666,-0.02666 -0.08998,-0.09582 -0.192956,-0.176323 -0.31997,-0.239977 -0.172357,-0.08638 -1.306361,-0.482852 -2.506432,-0.879918 -1.200068,-0.397066 -2.201318,-0.763372 -2.23979,-0.799925 -0.03847,-0.03655 -0.932088,-0.340748 -1.999812,-0.693268 -2.45045,-0.809042 -7.320218,-2.76932 -11.092293,-4.47958 -1.600447,-0.725645 -4.745419,-2.024472 -6.986011,-2.87973 -2.240593,-0.855255 -5.451516,-2.094427 -7.119332,-2.746409 -1.66782,-0.651982 -3.401166,-1.301832 -3.866304,-1.439864 -0.465143,-0.138032 -1.934905,-0.659353 -3.253028,-1.14656 -1.318122,-0.487208 -3.605866,-1.271834 -5.092855,-1.759834 -1.486991,-0.488001 -2.938013,-1.003733 -3.226364,-1.14656 -0.288349,-0.14283 -1.769924,-0.77205 -3.306357,-1.386536 -1.536436,-0.614486 -2.940293,-1.165261 -3.093043,-1.226552 -0.03632,-0.01457 -0.03034,-0.09656 -0.02666,-0.213313 0.0032,-0.101846 0.04708,-0.276772 0.07999,-0.453291 0.01879,-0.104619 0.02708,-0.200259 0.05333,-0.31997 0.07167,-0.310681 0.16571,-0.699569 0.293305,-1.146559 0.0033,-0.01188 -0.0034,-0.04134 0,-0.05333 0.130877,-0.455863 0.294321,-0.96081 0.479955,-1.546522 0.09375,-0.295815 0.155208,-0.475834 0.239978,-0.746596 0.172937,-0.568927 0.262819,-0.916142 0.479955,-1.626514 0.836364,-2.783632 1.04788,-3.891351 0.826589,-4.292931 -0.619941,-1.125009 -5.483072,-3.555356 -10.159047,-5.066191 -0.935902,-0.302397 -1.715592,-0.511687 -2.373111,-0.666604 -0.06462,-0.01523 -0.124502,-0.03951 -0.186649,-0.05333 -0.106921,-0.02998 -0.194326,-0.02773 -0.293305,-0.05333 -0.373998,-0.09673 -0.69295,-0.187661 -0.933246,-0.213313 -0.334303,-0.03569 -0.56771,-0.07915 -0.773261,-0.05333 z" fill="#000000" stroke="#000000" stroke-width="0.8532533"></path></svg>';
$('img').attr({src: src});
JsFiddle: https://jsfiddle.net/p11mLasu/3/

Firefox doesn't seem happy with the unescaped # chars in your SVG. I assume it's interpreting them as hash separators.
Encoding them seems to take care of things:
$('img').attr({'src': src.replace(/\#/g, '%23')});
src = 'data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 80 80" version="1.1" x="0px" y="0px"><path style="" d="m 11.958347,15.536432 c -0.417566,0.05245 -0.699072,0.416455 -1.333208,1.573186 -0.312318,0.53934 -0.674093,1.232201 -1.066567,2.026476 -0.05258,0.100663 -0.07769,0.133619 -0.133321,0.239978 -3.1051195,5.936663 -8.1858988,19.470857 -8.1858988,21.811287 0,0.146865 0.046316,0.296692 0.1333209,0.453291 0.00195,0.0074 -0.00212,0.01945 0,0.02666 0.026304,0.0454 0.04598,0.08678 0.079992,0.133321 0.069531,0.125808 0.1535797,0.233692 0.2933058,0.346634 0.1035412,0.08369 0.2057502,0.185432 0.3466341,0.293306 0.024887,0.01906 0.079075,0.0335 0.1066567,0.05333 0.106876,0.07683 0.2285881,0.179184 0.3732983,0.266642 0.6582732,0.435934 1.5688528,0.929375 2.7997373,1.519857 3.7990697,1.822505 8.1392307,3.232629 10.0790547,3.359685 0.0244,0.0036 0.05673,0.0236 0.07999,0.02666 0.01503,7.55e-4 0.03861,-5.86e-4 0.05333,0 0.137277,0.01568 0.25715,0.0335 0.346635,0.02666 0.595935,-0.04551 0.716019,-0.148104 1.4132,-1.253216 0.415447,-0.658532 1.041835,-1.762877 1.386537,-2.453103 1.64981,-3.303579 2.421859,-4.887803 3.01305,-5.546146 0.231428,0.09208 1.477919,0.582479 2.959723,1.173223 1.53711,0.612794 3.052262,1.211482 3.359685,1.306544 0.307421,0.09506 1.705565,0.716103 3.119707,1.386537 1.414142,0.670435 3.641698,1.658431 4.93287,2.213125 1.291173,0.554697 2.68742,1.192886 3.119708,1.413201 0.432283,0.220313 2.154789,0.950407 3.812975,1.626514 1.658184,0.676105 4.825899,1.983135 7.039341,2.906394 2.213438,0.923259 5.379258,2.17011 7.039339,2.746409 3.912624,1.358276 8.78521,3.271615 11.118957,4.372923 1.016873,0.47987 1.893422,0.879918 1.946484,0.879918 0.05306,0 1.042962,0.421177 2.186462,0.95991 1.1435,0.538734 2.215321,1.037141 2.399775,1.09323 0.17663,0.05372 0.362004,0.05673 0.533283,0.02667 0.0014,0.02596 -9.56e-4,0.05375 0.02666,0.07999 0.245796,0.233529 1.071763,-0.359152 1.813163,-1.306544 0.579482,-0.740489 1.085513,-1.933628 1.359873,-3.093043 0.0045,-0.01874 0.02236,-0.0346 0.02666,-0.05333 0.03069,-0.101602 0.02788,-0.193972 0.05333,-0.293306 0.07295,-0.284814 0.13554,-0.545543 0.159985,-0.799925 0.110747,-1.152584 -0.05807,-2.115011 -0.373298,-2.186462 -0.0079,-0.0091 -0.01848,-0.01795 -0.02666,-0.02666 -0.08998,-0.09582 -0.192956,-0.176323 -0.31997,-0.239977 -0.172357,-0.08638 -1.306361,-0.482852 -2.506432,-0.879918 -1.200068,-0.397066 -2.201318,-0.763372 -2.23979,-0.799925 -0.03847,-0.03655 -0.932088,-0.340748 -1.999812,-0.693268 -2.45045,-0.809042 -7.320218,-2.76932 -11.092293,-4.47958 -1.600447,-0.725645 -4.745419,-2.024472 -6.986011,-2.87973 -2.240593,-0.855255 -5.451516,-2.094427 -7.119332,-2.746409 -1.66782,-0.651982 -3.401166,-1.301832 -3.866304,-1.439864 -0.465143,-0.138032 -1.934905,-0.659353 -3.253028,-1.14656 -1.318122,-0.487208 -3.605866,-1.271834 -5.092855,-1.759834 -1.486991,-0.488001 -2.938013,-1.003733 -3.226364,-1.14656 -0.288349,-0.14283 -1.769924,-0.77205 -3.306357,-1.386536 -1.536436,-0.614486 -2.940293,-1.165261 -3.093043,-1.226552 -0.03632,-0.01457 -0.03034,-0.09656 -0.02666,-0.213313 0.0032,-0.101846 0.04708,-0.276772 0.07999,-0.453291 0.01879,-0.104619 0.02708,-0.200259 0.05333,-0.31997 0.07167,-0.310681 0.16571,-0.699569 0.293305,-1.146559 0.0033,-0.01188 -0.0034,-0.04134 0,-0.05333 0.130877,-0.455863 0.294321,-0.96081 0.479955,-1.546522 0.09375,-0.295815 0.155208,-0.475834 0.239978,-0.746596 0.172937,-0.568927 0.262819,-0.916142 0.479955,-1.626514 0.836364,-2.783632 1.04788,-3.891351 0.826589,-4.292931 -0.619941,-1.125009 -5.483072,-3.555356 -10.159047,-5.066191 -0.935902,-0.302397 -1.715592,-0.511687 -2.373111,-0.666604 -0.06462,-0.01523 -0.124502,-0.03951 -0.186649,-0.05333 -0.106921,-0.02998 -0.194326,-0.02773 -0.293305,-0.05333 -0.373998,-0.09673 -0.69295,-0.187661 -0.933246,-0.213313 -0.334303,-0.03569 -0.56771,-0.07915 -0.773261,-0.05333 z" fill="#000000" stroke="#000000" stroke-width="0.8532533"></path></svg>';
$('img').attr({
'src': src.replace(/\#/g, '%23')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img></img>

look, try mounting the raw svg in a div Element, it renders in Chrome and FF
HTML:
<div id="svgInMe"></div>
JS:
var theSvg = '<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 80 80" version="1.1" x="0px" y="0px"><path style="" d="m 11.958347,15.536432 c -0.417566,0.05245 -0.699072,0.416455 -1.333208,1.573186 -0.312318,0.53934 -0.674093,1.232201 -1.066567,2.026476 -0.05258,0.100663 -0.07769,0.133619 -0.133321,0.239978 -3.1051195,5.936663 -8.1858988,19.470857 -8.1858988,21.811287 0,0.146865 0.046316,0.296692 0.1333209,0.453291 0.00195,0.0074 -0.00212,0.01945 0,0.02666 0.026304,0.0454 0.04598,0.08678 0.079992,0.133321 0.069531,0.125808 0.1535797,0.233692 0.2933058,0.346634 0.1035412,0.08369 0.2057502,0.185432 0.3466341,0.293306 0.024887,0.01906 0.079075,0.0335 0.1066567,0.05333 0.106876,0.07683 0.2285881,0.179184 0.3732983,0.266642 0.6582732,0.435934 1.5688528,0.929375 2.7997373,1.519857 3.7990697,1.822505 8.1392307,3.232629 10.0790547,3.359685 0.0244,0.0036 0.05673,0.0236 0.07999,0.02666 0.01503,7.55e-4 0.03861,-5.86e-4 0.05333,0 0.137277,0.01568 0.25715,0.0335 0.346635,0.02666 0.595935,-0.04551 0.716019,-0.148104 1.4132,-1.253216 0.415447,-0.658532 1.041835,-1.762877 1.386537,-2.453103 1.64981,-3.303579 2.421859,-4.887803 3.01305,-5.546146 0.231428,0.09208 1.477919,0.582479 2.959723,1.173223 1.53711,0.612794 3.052262,1.211482 3.359685,1.306544 0.307421,0.09506 1.705565,0.716103 3.119707,1.386537 1.414142,0.670435 3.641698,1.658431 4.93287,2.213125 1.291173,0.554697 2.68742,1.192886 3.119708,1.413201 0.432283,0.220313 2.154789,0.950407 3.812975,1.626514 1.658184,0.676105 4.825899,1.983135 7.039341,2.906394 2.213438,0.923259 5.379258,2.17011 7.039339,2.746409 3.912624,1.358276 8.78521,3.271615 11.118957,4.372923 1.016873,0.47987 1.893422,0.879918 1.946484,0.879918 0.05306,0 1.042962,0.421177 2.186462,0.95991 1.1435,0.538734 2.215321,1.037141 2.399775,1.09323 0.17663,0.05372 0.362004,0.05673 0.533283,0.02667 0.0014,0.02596 -9.56e-4,0.05375 0.02666,0.07999 0.245796,0.233529 1.071763,-0.359152 1.813163,-1.306544 0.579482,-0.740489 1.085513,-1.933628 1.359873,-3.093043 0.0045,-0.01874 0.02236,-0.0346 0.02666,-0.05333 0.03069,-0.101602 0.02788,-0.193972 0.05333,-0.293306 0.07295,-0.284814 0.13554,-0.545543 0.159985,-0.799925 0.110747,-1.152584 -0.05807,-2.115011 -0.373298,-2.186462 -0.0079,-0.0091 -0.01848,-0.01795 -0.02666,-0.02666 -0.08998,-0.09582 -0.192956,-0.176323 -0.31997,-0.239977 -0.172357,-0.08638 -1.306361,-0.482852 -2.506432,-0.879918 -1.200068,-0.397066 -2.201318,-0.763372 -2.23979,-0.799925 -0.03847,-0.03655 -0.932088,-0.340748 -1.999812,-0.693268 -2.45045,-0.809042 -7.320218,-2.76932 -11.092293,-4.47958 -1.600447,-0.725645 -4.745419,-2.024472 -6.986011,-2.87973 -2.240593,-0.855255 -5.451516,-2.094427 -7.119332,-2.746409 -1.66782,-0.651982 -3.401166,-1.301832 -3.866304,-1.439864 -0.465143,-0.138032 -1.934905,-0.659353 -3.253028,-1.14656 -1.318122,-0.487208 -3.605866,-1.271834 -5.092855,-1.759834 -1.486991,-0.488001 -2.938013,-1.003733 -3.226364,-1.14656 -0.288349,-0.14283 -1.769924,-0.77205 -3.306357,-1.386536 -1.536436,-0.614486 -2.940293,-1.165261 -3.093043,-1.226552 -0.03632,-0.01457 -0.03034,-0.09656 -0.02666,-0.213313 0.0032,-0.101846 0.04708,-0.276772 0.07999,-0.453291 0.01879,-0.104619 0.02708,-0.200259 0.05333,-0.31997 0.07167,-0.310681 0.16571,-0.699569 0.293305,-1.146559 0.0033,-0.01188 -0.0034,-0.04134 0,-0.05333 0.130877,-0.455863 0.294321,-0.96081 0.479955,-1.546522 0.09375,-0.295815 0.155208,-0.475834 0.239978,-0.746596 0.172937,-0.568927 0.262819,-0.916142 0.479955,-1.626514 0.836364,-2.783632 1.04788,-3.891351 0.826589,-4.292931 -0.619941,-1.125009 -5.483072,-3.555356 -10.159047,-5.066191 -0.935902,-0.302397 -1.715592,-0.511687 -2.373111,-0.666604 -0.06462,-0.01523 -0.124502,-0.03951 -0.186649,-0.05333 -0.106921,-0.02998 -0.194326,-0.02773 -0.293305,-0.05333 -0.373998,-0.09673 -0.69295,-0.187661 -0.933246,-0.213313 -0.334303,-0.03569 -0.56771,-0.07915 -0.773261,-0.05333 z" fill="#000000" stroke="#000000" stroke-width="0.8532533"></path></svg>';
$('#svgInMe').html(theSvg);
https://jsfiddle.net/sdsd4w17/

If you base64 encode the svg source, it works in both browsers. I used the data:uri generator tool here:
http://dopiaza.org/tools/datauri/index.php.

Can't add events to inline SVG elements

I'm trying to access inline SVG elements in JavaScript, to add a click event. I'm running into issues adding the event to anything else than a single element identified with id.
Using document.getElementById("p1_1_1") will work, but I'll need to manipulate 200 rectangles, so I will need to use document.getElementsByTagName or document.getElementsByClassName - both of which return meaningful HTMLCollections, but the addEvent won't add the event.
I've tried Firefox 17 and Chrome 23, and some additional methods, such as the getElementsByTagNameNS, bu no luck so far.
Thankful for any help you can offer.
Here are stripped down versions of the JS code and HTML/SVG I'm working with:
JavaScript:
function testing() {
var testDiv = document.getElementById("tester");
testDiv.innerHTML = '<h1>Success!</h1><br>';
}
function addEvent(obj, evt, func) {
if (obj.addEventListener) {
obj.addEventListener(evt, func, false)
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, func);
} else {
alert("no success adding event");
}
}
function init() {
var targetSquares = document.getElementsByTagName("rect");
addEvent(targetSquares, "click", testing);
}
window.addEvent(window, "load", init);
inline SVG
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="bsroyale.js"></script>
</head>
<body>
<div id="tester">
</div>
<div id="gamemap">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600">
<rect x="50" y="50" width="20" height="20" class="p1" id="p1_1_1" />
<rect x="71" y="50" width="20" height="20" class="p1" id="p1_2_1" />
<rect x="92" y="50" width="20" height="20" class="p1" id="p1_3_1" />
<rect x="113" y="50" width="20" height="20" class="p1" id="p1_4_1" />
<rect x="134" y="50" width="20" height="20" class="p1" id="p1_5_1" />
<!-- etc etc, 200 rect in total-->
</svg>
</div>
</body>
</html>

document.getElementsByTagName("rect") returns an HTML collection. You must then loop through this collection (i.e. for each...) and add the event listeners to each collection-item.
I didn't test it, but your init function could look like this:
function init() {
var targetSquares = document.getElementsByTagName("rect");
for (var i = 0; i < targetSquares.length; i++) {
addEvent(targetSquares[i], "click", testing);
}
}