Jquery onclick method is not working properly - javascript
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
Related
object not clickable with selenium
I'm trying to get an object from a table with python and selenium. However, first I need to click in the Goalscorers (table title) to show the table. The problem is that I can't click in any of the object, and there isn't any ref. So I can't understand what I need to do, all this div "are clickable" when I put the mouse on top of them, so not sure how it works, any idea? I tried driverBet.find_element(By.XPATH,"//div[contains(#data-test-market,'Goalscorers')]").click() but it's not clickable, I tried also the data-test-id="rabMarkets" but it's not clickable. <div data-test-id="rabMarkets"> <div class="_ty4a3m"> <div data-test-id="rabMarketsAccordion"> <div class="_1ufbuwwo "> <div class="_1b7dz8zNaN"> <div class="_q76d6b"> <span class="_uywwi"> <div> <div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="title-309" style="fill:#909DB4;height:18px;width:18px;" data-src="//bet.sbgcdn.com/static/assets/7200e23c7ae8f1778ea608e36e92b473.svg" class="injected-svg _uhlm2"> <title id="title-309"> Icon / Toggle / Outlined / Star </title> <path fill-rule="nonzero" d="M17.738 20.999a.716.716 0 0 1-.331-.082l-5.408-2.821-5.408 2.821a.717.717 0 0 1-.75-.053.704.704 0 0 1-.284-.692l1.033-5.976-4.375-4.232a.703.703 0 0 1-.18-.725.71.71 0 0 1 .575-.48l6.046-.873L11.36 2.45a.713.713 0 0 1 1.277 0l2.704 5.437 6.046.872a.71.71 0 0 1 .575.481.703.703 0 0 1-.18.725l-4.375 4.232 1.033 5.976a.705.705 0 0 1-.283.692.715.715 0 0 1-.42.135zM5 10l3.5 3.5-1 5 4.499-2.45 4.497 2.45-.996-5L19 10l-4.5-.5c-.155-.022-.988-1.522-2.501-4.5L9.5 9.5 5 10z" role="presentation"> </path> </svg> </div> </div> </span> </div> <div class="_zxe9qt"> <div class="_t0tx82" data-test-market="Goalscorers">Goalscorers</div> <div class="_1cpli7v"></div></div><div class="_w81afw"> <span class="_uywwi"> <div><div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 9" width="15px" height="9px" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="title-1915" style="fill:#909DB4;height:14px;width:14px;" data-src="//bet.sbgcdn.com/static/assets/5c342ef89fd16eb91c0b8ddec4a2dcc0.svg" class="injected-svg _j30eqf _uhlm2"> <title id="title-1915"> icon-arrow-down </title> <path transform="translate(7.250000, 5.000000) scale(1, -1) rotate(90.000000) translate(-7.250000, -5.000000)" fill-rule="evenodd" d="m3 5.0033l7-7.0033 0.79289 0.79289c0.39023 0.39065 0.39032 1.0237 2.119e-4 1.4144l-4.7931 4.796 4.7927 4.7898c0.39085 0.3902 0.39104 1.0234 6.357e-4 1.414-7.06e-5 7.07e-5 -1.412e-4 1.413e-4 -4.238e-4 1e-7l-0.79289 0.79289-7-6.9967z" role="presentation"></path> </svg></div></div></span></div></div></div></div></div></div> thank you
You can access the element using the class, something like this: This functions first check if the element with the class exists: def check_exists_by_class_name(browser, classname): try: browser.find_element(By.CLASS_NAME, classname) except NoSuchElementException: return False return True Then, just use the function: browser = webdriver.Chrome(service=service, options=options) if check_exists_by_class_name(browser, '_t0tx82'): print('Go on') else: print('not found')
How to click svg using querySelector?
I am trying to build a chrome extension to click an SVG on a webpage using the below command but it shows that "click" is not a function. Can anyone give me some direction in order to solve this issue? document.querySelector("div[class^='SubmitChat__SubmitButton']").querySelector("svg > path(0)").click(); <form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO"> <div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div> <div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO"> <div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ"> <textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea> </div> <div class="SubmitChat__SubmitButton-kXYuum kSQpDq"> <span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5"> </path> </svg> </span> </div> </div> </form>
You can't really click an svg path but here is a solution: const pathElem = document.querySelector("div[class^='SubmitChat__SubmitButton'] svg > path") pathElem.onclick = () => console.log("clicked") pathElem.dispatchEvent(new Event("click")) pathElem.dispatchEvent(new Event("click")) <form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO"> <div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div> <div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO"> <div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ"> <textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea> </div> <div class="SubmitChat__SubmitButton-kXYuum kSQpDq"> <span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5"> </path> </svg> </span> </div> </div> </form> Note that .click() works with HTML but not SVG elements. MDN Also note that the click event handler in your case is probably not listening on the path element but rather on the svg, div or span tag.
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
Changing svg objects color?
HTML: svg object and script that should change color of the svg object but for some reason it doesnt? <object id="object" type="image/svg+xml" data="play-pattern--light.svg"></object> <script type="text/javascript"> window.onload=function () { var a = document.getElementById("object"); var svgDoc = a.contentDocument; var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style"); styleElement.textContent = ".st0 { fill: #000 }"; svgDoc.getElementById("object").appendChild(styleElement); }; </script> I think this is all you need to color an SVG object <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="160px" height="160px" viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve"> <style type="text/css"> .st0{fill:#EDF5F5;} </style> Need some guidance why my code is not working, it also says an error "Uncaught TypeError: Cannot read property 'appendChild' of null" Thanks
You should use: svgDoc.documentElement.appendChild(styleElement); instead of svgDoc.getElementById("object").appendChild(styleElement);
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.