I made an SVG face and want to center each pupil in their respective eye.
I tried doing this by getting the center of the eye using getBoundingClientRect(). However when I set the position of the pupil this way it didn't work as expected (it did not center, and changes location based on size of page).
I'm guessing getBoundingClientRect() is related to a global position and the cx, cy attributes are local, but it's not clear to me what the attributes are local to or how I would fix it
Any ideas why this doesn't work and what approach might fix it?
Code
// Center the pupil in the eye. Side param is "left" or "right"
function center_pupil(side) {
let eye = document.querySelector(`#${side}-eye`).getBoundingClientRect()
let pupil = document.querySelector(`#${side}-pupil`)
let pupil_radius = pupil.getAttribute("r")
pupil.setAttribute("cx", eye.left + eye.width / 2 - pupil_radius)
pupil.setAttribute("cy", eye.top + eye.height / 2 - pupil_radius)
}
center_pupil("left")
center_pupil("right")
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 645.72 579.45">
<defs>
<clipPath id="clip-path" transform="translate(-114.91 -242.55)">
<path d="M544,377s9-21,54-25c0,0,114-7,150,25s-43,86-43,86-33.77,18.6-79.06,11.62C615.11,473,587.67,468.87,563,448c-10.53-8.91-25.76-21.79-27-42C535.2,393.05,540.49,382.61,544,377Z"
fill="none" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-114.91 -242.55)">
<path d="M117.5,397.5a38.69,38.69,0,0,1,8-11c6.89-6.57,14.55-8.78,19-10,32.47-8.93,45-10,45-10,34.68-2.95,53.54-4.56,81-1,33.83,4.38,50.79,6.54,61,21,13.58,19.24,5,45.13,4,48-6.94,20.08-23.19,30.46-35,38a106,106,0,0,1-29.07,12.82,108,108,0,0,1-39.93,3.18c-4.63.72-54.1,7.55-88.32-28.91C120.39,435.31,117.91,406.25,117.5,397.5Z"
fill="none" />
</clipPath>
</defs>
<title>face</title>
<g id="eyes">
<g id="right-eye">
<path d="M540.89,375.37A28.23,28.23,0,0,1,548.4,367a24,24,0,0,1,2.19-1.6c.76-.5,1.5-1,2.26-1.48,1.56-.86,3.07-1.81,4.67-2.55s3.14-1.57,4.76-2.23c.8-.34,1.6-.69,2.39-1.06l2.42-.94c.81-.31,1.61-.65,2.42-1s1.64-.56,2.46-.85l2.46-.81a25.18,25.18,0,0,1,2.49-.73c1.68-.43,3.34-.91,5-1.36s3.38-.71,5.07-1.07l2.54-.55,2.56-.41,5.14-.82c1.81-.26,3.45-.36,5.17-.53l5.12-.43q5.12-.4,10.23-.65a289.41,289.41,0,0,1,41,.71c6.82.65,13.62,1.57,20.39,2.63s13.51,2.37,20.23,3.71,13.41,2.9,20.15,4.54c1.69.38,3.36.86,5,1.36l2.51.73c.83.26,1.65.58,2.48.87l2.47.9c.82.3,1.61.71,2.42,1.05a49,49,0,0,1,4.78,2.33,52.84,52.84,0,0,1,4.63,2.72l2.26,1.48c.75.49,1.44,1.12,2.16,1.68l2.12,1.72c.67.65,1.37,1.27,2,2a30,30,0,0,1,3.57,4.42c.57.78,1,1.65,1.5,2.47s.88,1.73,1.21,2.64a25.41,25.41,0,0,1,1.57,5.59,29.78,29.78,0,0,1-.37,11.31c-4.58,14.09-13,25.18-22.33,35.35a178.89,178.89,0,0,1-14.84,14.31q-3.88,3.39-8,6.53c-2.72,2.11-5.44,4.15-8.32,6.15l-.11.08-.1.05c-2.33,1.23-4.54,2.18-6.86,3.13s-4.62,1.77-7,2.58c-4.68,1.57-9.43,2.87-14.23,4a151.83,151.83,0,0,1-29.28,3.67c-2.46,0-4.93.12-7.39.07l-7.41-.31-7.38-.71c-2.46-.23-4.85-.58-7.3-.93a131.55,131.55,0,0,1-28.88-7.35,114.07,114.07,0,0,1-13.69-6.28c-2.25-1.13-4.38-2.49-6.55-3.78-1.08-.65-2.09-1.41-3.14-2.11s-2.12-1.4-3.1-2.19a143.74,143.74,0,0,1-11.34-9.74,83.58,83.58,0,0,1-10.05-11.51A57.13,57.13,0,0,1,535.46,420a53.51,53.51,0,0,1-2.89-15.38,48.4,48.4,0,0,1,2-15.44,50,50,0,0,1,2.7-7.28c.54-1.17,1.12-2.32,1.76-3.44.31-.56.64-1.11,1-1.65S540.59,375.83,540.89,375.37Zm6.22,3.26c-.75,1.3-1.25,2.21-1.77,3.23s-1,2-1.52,3a56.3,56.3,0,0,0-2.49,6.29,41.51,41.51,0,0,0-2,13.2,34.3,34.3,0,0,0,2.84,12.95,45.72,45.72,0,0,0,7.15,11.32,91.37,91.37,0,0,0,9.77,9.7c3.46,3.07,7.29,6.18,10.83,9a112.56,112.56,0,0,0,23.73,14.54,121.21,121.21,0,0,0,13.15,5,135,135,0,0,0,13.72,3.63c2.31.47,4.7,1,7,1.32s4.69.73,7,1l7.1.56c2.37.13,4.75.12,7.13.18a128.42,128.42,0,0,0,28.29-3.39,135,135,0,0,0,13.69-4c2.23-.81,4.46-1.64,6.63-2.57s4.39-1.91,6.33-3l-.21.13c5.43-3.8,10.71-8.06,15.86-12.34s10.1-8.85,14.78-13.63a103.24,103.24,0,0,0,12.64-15.43,47.41,47.41,0,0,0,4.69-8.65,40.34,40.34,0,0,0,2.28-9.25,33.29,33.29,0,0,0,.35-4.54,22.19,22.19,0,0,0-.46-4.4,20.11,20.11,0,0,0-1.34-4.15c-.25-.67-.64-1.3-1-1.95s-.74-1.27-1.2-1.86a29.21,29.21,0,0,0-6.38-6.48c-.62-.47-1.2-1-1.86-1.44l-2-1.34a46,46,0,0,0-4.12-2.49c-11.39-6-24.05-11.23-37.37-13.24-13.25-2.37-26.77-3-40.22-3.48s-26.92-1-40.43-1.38l-10.13-.24-5.07-.07c-1.66,0-3.42,0-5,0a108.23,108.23,0,0,0-19.78,2.72,24.43,24.43,0,0,0-2.41.65l-2.39.72a43.68,43.68,0,0,0-4.71,1.63c-.77.32-1.55.6-2.3.94s-1.48.75-2.21,1.14-1.47.74-2.17,1.18l-2.06,1.35-1,.68c-.33.24-.64.51-1,.76l-1.9,1.53c-.6.54-1.18,1.11-1.76,1.65a20.72,20.72,0,0,0-1.67,1.71c-.54.58-1.07,1.17-1.54,1.78a21.79,21.79,0,0,0-1.41,1.83l-.66.93-.59.93c-.21.31-.34.62-.52.93-.09.15-.15.29-.22.43Z"
transform="translate(-114.91 -242.55)" />
</g>
<path d="M505,327" transform="translate(-114.91 -242.55)" />
<g id="left-eye">
<path d="M114.91,397a8.77,8.77,0,0,1,.41-1.29c.07-.21.14-.43.22-.65.15-.43.33-.85.52-1.27a23.67,23.67,0,0,1,1.3-2.43,33.63,33.63,0,0,1,3.35-4.38,39.68,39.68,0,0,1,8.37-7.14,45.38,45.38,0,0,1,9.88-4.59c3.45-1.11,6.75-1.8,10-2.64,6.64-1.59,13.29-3.11,20-4.49,3.35-.68,6.71-1.32,10.08-1.9,1.69-.29,3.38-.58,5.08-.84l2.56-.36,1.29-.16.66-.08.33,0,.17,0,.34,0h-.15l10-.79c3.36-.27,6.71-.48,10.05-1s6.66-1.26,10-1.68,6.74-.55,10.13-.72c6.78-.27,13.6-.4,20.41-.06s13.6.93,20.33,1.86,13.33,1.84,20,2.91a156,156,0,0,1,20.08,4.29c.83.26,1.66.55,2.49.83s1.65.56,2.47.91l2.45,1,2.4,1.19a37.88,37.88,0,0,1,8.79,6.29,39.43,39.43,0,0,1,6.43,8.62,19,19,0,0,1,1.21,2.38l1.11,2.43.86,2.52a18.46,18.46,0,0,1,.77,2.53,57.7,57.7,0,0,1,1.39,20.78,77.82,77.82,0,0,1-1.71,10.2c-.41,1.68-.84,3.35-1.38,5s-1.2,3.27-1.82,4.9a80.14,80.14,0,0,1-10.73,18l-.83,1-.87,1c-.6.64-1.17,1.32-1.79,1.94-1.24,1.23-2.49,2.46-3.82,3.59a93.34,93.34,0,0,1-8.31,6.24c-1.42.95-2.85,1.9-4.28,2.81s-2.82,1.81-4.32,2.74q-4.45,2.71-9.14,5a111.57,111.57,0,0,1-19.45,7.27,109.85,109.85,0,0,1-41.18,3l.81,0a96.63,96.63,0,0,1-10.64.84c-3.53.09-7.06,0-10.58-.18a118,118,0,0,1-20.88-3.16A104.42,104.42,0,0,1,170,482a97.9,97.9,0,0,1-18-11.15,94.11,94.11,0,0,1-26.21-32.74,104.55,104.55,0,0,1-7.36-19.73q-1.36-5.09-2.24-10.3c-.28-1.74-.57-3.48-.77-5.23-.12-.87-.2-1.75-.29-2.63l-.07-.66-.07-.86C114.94,398.15,114.92,397.55,114.91,397Zm5.18,1.08a7,7,0,0,1,.08.79l0,1.06c.05.83.09,1.67.17,2.5.11,1.68.31,3.34.51,5,.46,3.33,1.1,6.63,1.88,9.91.39,1.63.86,3.25,1.32,4.86s1,3.21,1.62,4.78c1.17,3.15,2.48,6.25,4,9.27a87.88,87.88,0,0,0,42.45,41.16,99.57,99.57,0,0,0,19,6.34,112.17,112.17,0,0,0,19.92,2.62c3.35.14,6.71.15,10.05,0a89,89,0,0,0,9.9-.94l.38-.06.43,0a105.31,105.31,0,0,0,19.53.1A110.47,110.47,0,0,0,270.55,482a104.55,104.55,0,0,0,18.21-6.92,96.58,96.58,0,0,0,8.52-4.71c1.36-.84,2.79-1.77,4.18-2.67s2.76-1.83,4.12-2.75c2.72-1.85,5.3-3.82,7.85-5.8s5-4,7.4-6.21a51.27,51.27,0,0,0,6.53-7.12,42.86,42.86,0,0,0,4.84-8.38,61.67,61.67,0,0,0,4.57-18.91,52.32,52.32,0,0,0-1.7-19.18,18.18,18.18,0,0,0-.76-2.26l-.84-2.22-1.06-2.12a16.05,16.05,0,0,0-1.13-2.08,35,35,0,0,0-5.82-7.29,34.22,34.22,0,0,0-7.68-5.19l-2.14-1-2.23-.86c-.73-.3-1.5-.55-2.27-.78s-1.53-.49-2.31-.71a160.49,160.49,0,0,0-19.39-3.74c-6.59-.93-13.26-1.73-19.92-2.52a264.5,264.5,0,0,0-39.7-1.74c-3.33.07-6.65.33-10,.27s-6.72-.28-10.08-.29a96.26,96.26,0,0,0-10.05.57l-10,.9h-.16l-2.26.33-2.48.41c-1.65.29-3.3.61-4.95.95-3.3.7-6.59,1.48-9.87,2.28-6.56,1.62-13.08,3.42-19.58,5.32-3.23,1-6.56,1.86-9.53,3a39,39,0,0,0-8.42,4.28,34.43,34.43,0,0,0-6.92,6.22,46.51,46.51,0,0,0-2.8,3.73l-1.37,1.92-.7,1-.37.48A.39.39,0,0,0,120.09,398Z"
transform="translate(-114.91 -242.55)" />
</g>
</g>
<g clip-path="url(#clip-path)">
<circle id="right-pupil" cx="532.09" cy="125.45" r="31" />
</g>
<g clip-path="url(#clip-path-2)">
<circle id="left-pupil" cx="116.59" cy="139.95" r="31" />
</g>
<g id="Layer_4" data-name="Layer 4">
<path d="M505,264s120-29,194-10" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M154,280s116-27,179,0" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M390,401c9.15,143.49,6.63,190.63,2,205,0,0-6.53,20.28-2,41a35.35,35.35,0,0,0,4,10s1.3,2.14,8,10"
transform="translate(-114.91 -242.55)" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<line x1="321.09" y1="415.45" x2="329.09" y2="424.45" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<path d="M363,774l146-4s-1,47-73,47S363,774,363,774Z" transform="translate(-114.91 -242.55)" fill="none"
stroke="#000" stroke-miterlimit="10" stroke-width="10" />
</g>
</svg>
What I'm currently seeing
Note: pupil location changes based on screen size
I am using animateMotion to have an animation on my path. Here is the simple code:
<!DOCTYPE html>
<html>
<head>
<title>Example Of Many Things!</title>
</head>
<body>
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</svg>
</body>
<script type="text/javascript">
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5"></mpath></animateMotion></circle>'
g8t3.insertAdjacentHTML( 'beforeend', circleAnim );
// // now move circle on the path
var g8t4 = document.getElementById('5t6');
var path = document.getElementById('5t6').getElementsByTagName('path')[0]
path.setAttribute("id", "path5t6");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end"><mpath xlink:href="#path5t6"></mpath></animateMotion></circle>'
g8t4.insertAdjacentHTML( 'beforeend', circleAnim );
</script></html>
As you can see, there is a green circle on the path which is moving, which is correct.
But there is something weird: There is also another green circle on the left bottom of the graph, which is redundant. I don't how it appears and how I can get rid of it.
Any help?
Instead of appending two circles in your svg, append the two <animateMotion>s inside a single circle. Also, you'll probably want to set your <animationMotion>'s fill attribute to "fill".
As you wrote it, when your circles are in idle state, they will come back to their initial position (unset).
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = '<circle r="1" fill="green">' +
// first part of the anim
'<animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5" fill="freeze"></mpath></animateMotion>' +
// second part of the anim
'<animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end" fill="freeze"><mpath xlink:href="#path5t6"></mpath></animateMotion>' +
'</circle>'
g8t3.insertAdjacentHTML('beforeend', circleAnim);
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</g>
</svg>