We Keep Coding

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.

How to compute getBoundingClientRect() in a scaled svg?

I have a usecase where designers supply us with a SVG, and we use certain elements in that SVG to position our dynamically created elements.
In the snippet below I try to overlap the rect#overlayTarget with the div#overlay using getBoundingClientRect: it doesn't take the scaling of the parent element into account, and the elements don't overlap.
The answers from this question is not applicable here as it uses element.offsetLeft and element.offsetTop, which aren't available for SVG: How to compute getBoundingClientRect() without considering transforms?
How do I make the #overlay and #overlayTarget overlap?
const target = document.querySelector("#overlayTarget");
const position = target.getBoundingClientRect();
const overlay = document.querySelector("#overlay");
overlay.style.top = `${position.y}px`;
overlay.style.left = `${position.x}px`;
overlay.style.width = `${position.width}px`;
overlay.style.height = `${position.height}px`;
#overlay {
position: absolute;
background: hotpink;
opacity: 0.3;
width: 100px;
height: 100px;
}
<div id="app" style="transform: scale(0.875);">
Test
<div id="overlay"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="1809" height="826" viewBox="0 0 809 826">
<g
id="Main_overview"
data-name="Main overview"
transform="translate(-49.5 -155)"
>
<g
id="overlayTarget"
data-name="DC-DC converter"
transform="translate(400 512)"
>
<rect
id="Rectangle_29"
data-name="Rectangle 29"
width="74"
height="74"
fill="none"
stroke="#47516c"
stroke-width="2"
/>
</g>
</g>
</svg>
</div>

If you cannot set your overlay element outside of the transformed element, this answer will work, but only for some simple transformations:
translations and
scales with factors > 0
In these cases, the corners of the bounding box aren't moved out of their top/left and bottom/right orientation. Rotations or skews, and most of the 3D transforms won'T work out.
You can then compute the resulting box values for your overlay by transforming the corners of position with the inverse matrix to that set for the #app element. The DOMPoint and DOMMatrix interfaces help with that.
It is important to remember that transform sets an implicit position: relative, so the top and left values of the overlay are not in relation to the viewport.
const app = document.querySelector('#app');
const relative = app.getBoundingClientRect();
const target = document.querySelector("#overlayTarget");
const position = target.getBoundingClientRect();
const matrix = new DOMMatrix(app.style.transform).inverse();
const topleft = new DOMPoint(
position.x - relative.x,
position.y - relative.y
).matrixTransform(matrix);
const bottomright = new DOMPoint(
position.x - relative.x + position.width,
position.y - relative.y + position.height
).matrixTransform(matrix);
const overlay = document.querySelector("#overlay");
overlay.style.top = `${topleft.y}px`;
overlay.style.left = `${topleft.x}px`;
overlay.style.width = `${bottomright.x - topleft.x}px`;
overlay.style.height = `${bottomright.y - topleft.y}px`;
#overlay {
position: absolute;
background: hotpink;
opacity: 0.3;
width: 100px;
height: 100px;
}
<div id="app" style="transform: scale(0.875);">
Test
<div id="overlay"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="1809" height="826" viewBox="0 0 809 826">
<g
id="Main_overview"
data-name="Main overview"
transform="translate(-49.5 -155)"
>
<g
id="overlayTarget"
data-name="DC-DC converter"
transform="translate(400 512)"
>
<rect
id="Rectangle_29"
data-name="Rectangle 29"
width="74"
height="74"
fill="none"
stroke="#47516c"
stroke-width="2"
/>
</g>
</g>
</svg>
</div>

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");

How to highlight the entire map using svg in HTML file?

this is coding for map. If i mouse over the map it highlight only half of the state is displayed. i need to highlight the full state. How to do it? can anyone help me with codings...
her is our HTML coding:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.js">
var aid;
var disid;
var but;
var hovid;
</script>
<title>Sample Map</title>
<style type="text/css">
.button {
list-style-type: none;
padding: 0;
margin: 0;
width: 100px;
font-family:"Arial", Helvetica, Sans-serif;
font-size:14px;v
font-weight: bold;
}
</style>
</head>
<body>
<div>
<!-- <p><a><button class="button" onclick="getid('VA','1','VA1','46','')";>Zoom</button></a></p> -->
<p><a><button class="button" onclick= "sample.style.zoom='2300%'">Zoom</button></a></p>
<button class="button"onclick= "sample.style.zoom='100%'">Zoom Out</button>
</div>
<!-- <table>
<tr>
<td> --> <div id="sample"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="500">
<polyline fill="#c0c3c5" id="KY1" title="Kentucky" alt="Kentucky" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="
500.441,263.861 519.982,261.672 527.197,259.595 527.905,257.709 530.413,256.524 530.479,255.049 532.128,253.862
532.072,252.457 540.856,244.216 540.864,244.264 538.589,244.089 537.851,243.049 536.241,242.449 535.75,240.996
533.173,238.515 533.231,237.692 530.597,234.998 531.316,233.435 530.781,230.627 530.781,230.627 528.975,228.691
527.19,228.215 525.973,225.548 524.385,226.236 523.034,228.147 521.104,228.767 518.115,227.233 516.802,227.828
516.454,228.738 515.22,228.559 513.299,226.783 508.794,226.435 507.269,223.303 505.197,221.858 503.135,222.735
501.486,221.724 499.633,223.385 500.554,224.641 500.064,225.881 501.259,226.137 501.105,227.831 498.844,228.127
496.451,229.948 495.07,229.116 492.96,229.656 493.607,232.788 491.278,234.587 490.614,237.195 488.653,237.714 487.86,239.469
487.837,241.85 486.289,243.296 483.179,241.962 482.883,240.586 481.676,239.776 482.273,240.805 480.57,241.011 480.997,241.997
479.969,242.69 480.156,244.352 479.224,244.76 478.745,245.989 478.408,245.047 477.161,245.259 475.939,243.798 473.506,245.307
472.427,247.555 468.408,245.295 466.396,245.884 465.938,244.891 466.096,246.879 465.344,247.479 464.821,246.169
463.313,246.82 462.113,245.998 461.558,246.416 462.041,247.836 461.383,248.588 460.169,248.138 458.925,250.765
460.069,253.706 454.872,255.64 454.62,257.494 455.961,259.672 454.62,261.216 448.309,258.937 446.057,261.607 446.887,263.396
446.925,266.685 445.605,270.267 443.757,269.407 442.896,271.563 461.841,270.314 461.136,267.126 464.089,267.174
464.391,267.746 481.355,266.352 481.978,265.647 500.441,263.861" onmouseover="getstate('KY','17','','KY1');" onmouseout="onout('KY1');"><title>Kentucky</title></polyline>
<polyline fill="#c0c3c5" id="OH1" title="Ohio" alt="Ohio" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="
545.233,168.086 533.923,176.797 530.205,177.313 526.158,179.271 521.791,179.139 521.14,178.462 519.449,178.738
518.338,178.549 516.531,177.317 513.018,176.452 495.778,178.437 500.535,222.528 501.486,221.724 503.135,222.735
505.197,221.858 507.269,223.303 508.794,226.435 513.299,226.783 515.22,228.559 516.454,228.738 516.802,227.828
518.115,227.233 521.104,228.767 523.034,228.147 524.385,226.236 525.973,225.548 527.19,228.215 528.975,228.691
530.781,230.627 534.104,229.693 534.405,227.264 535.615,226.61 534.705,223.909 536.431,219.708 537.908,219.829
538.283,221.624 539.354,220.335 540.222,220.539 539.172,218.129 539.979,217.634 539.759,216.364 540.446,214.741
541.875,214.269 543.063,211.814 544.403,212.763 546.07,211.648 549.936,207.213 550.254,205.473 549.648,204.752
550.342,203.011 550.119,202.119 550.712,201.92 550.564,199.059 551.643,195.083 551.105,193.692 551.299,192.52 550.067,190.643
550.456,189.982 551.832,189.336 551.869,189.331 548.445,167.054" onmouseover="getstate('OH','35','','OH1');" onmouseout="onout('OH1');"><title>Ohio</title></polyline>
<polyline fill="#c0c3c5" id="TN1" title="Tennessee" alt="Tennessee" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="
547.005,258.142 519.982,261.672 481.978,265.647 481.355,266.352 464.391,267.746 464.089,267.174 461.136,267.126
461.841,270.314 442.896,271.563 442.566,272.441 442.116,270.633 441.231,270.85 441.993,273.718 440.677,274.601
441.598,275.787 439.899,276.097 441.156,277.86 439.612,280.212 440.607,281.83 439.073,282.184 439.889,282.889 439.577,283.445
436.892,284.996 437.67,286.516 436.927,287.202 437.466,288.361 436.222,288.641 434.894,291.565 435.431,295.197
434.263,295.366 433.888,296.621 432.572,297.281 461.637,295.572 496.773,292.57 514.591,290.681 514.564,287.004
515.268,286.275 517.391,286.089 517.988,283.31 519.572,281.555 521.415,280.522 524.753,280.015 528.858,276.253
531.123,275.589 532.06,273.732 531.916,272.61 533.325,272.756 533.646,271.518 535.344,270.267 536.552,271.847 539.736,268.385
540.869,267.848 542.748,268.568 544.534,264.847 545.677,263.764 547.03,263.848 546.424,262.896 546.94,261.359 546.537,260.654
547.005,258.142" onmouseover="getstate('TN','42','','TN1');" onmouseout="onout('TN1');"><title>Tennessee</title></polyline>
</svg> </div> <!--</td>
</tr>
</table> -->
<script type="text/javascript" >
function getstate(aid,disid,but,hovid) {
var elem = document.getElementById(hovid);
elem.setAttributeNS(null,"stroke","#404040");
elem.setAttributeNS(null,"stroke-width","2.35");
}
function onout(hovid) {
var elem1 = document.getElementById(hovid);
elem1.setAttributeNS(null,"stroke","#FFFFFF");
elem1.setAttributeNS(null,"stroke-width","2.35");
}
</script>
</body>

This has to do with a layering order. Your middle state is buried under the other two. To bring it to top so that the border shows up topmost, you have to insert the element last.
A quickfix would be to give your element an ID: <svg id="id_svg" ...
Then in your getstate() function, insert this at the end:
document.getElementById('id_svg').appendChild( elem );
A possibly better way to handle this set of complexities is to use a library such as raphaeljs. It fixes many annoyances, and is cross-browser compatible.
For example, see this fiddle: http://jsfiddle.net/3345Q/