In SVG, I'm trying to draw a circle centered at the same position of an embedded png icon.
svg circle is positioned with cx and cy attributes image is positioned with x and y attributes
Could those values, x and cx, y and cy, be expressed in the same unit, like pt ?
<?xml version="1.0" encoding="utf-8" 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" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5">
<circle stroke="blue" stroke-width="3" cx="131.31pt" cy="455.9pt" r="74.34" fill-opacity="0.1" />
<image x="131.31pt" y="385.6pt" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2 oZAAABgpJREFUSEuNlflTU1cUx/N/1P7UKUUE2aqAUlqLoVhQKg7iXhdQkaKsgrIHhGwCYQsmJAQJYROMYTWQlxUSQghQxX2tMG3t2GmntLZ0hm/vDU9nnDqO35kzuXPuOZ/vue N G8Syk8XnCmUCwua1K4FNr pa5RBjSUZM0jObqXkscLZsvfX9lCYUBRk4LRmm0rjNmMtrbLOJ2Vi6TUdCSdSkdGTh7aSY6xmEFraG12uTCAbX 38uuaMlUDI8tGiwWp6TnIKK1CbTeDXvs99DkfQWO7h4bhWRQq nEiX4jvMnNhslqgGhxZpr0s5u0qaJSJBiYcaLgkQzJpVhpuQjE2j/qhWUj63RBrXbjQM4lCzTjy1eMo6LCjuGMCB3P4kJIe2nueMFjcm6LuuvFJCGskyKnrxsX GQivuiAgIbrmhlDnBr/PhdIeJwo0dmS12pAqN KUjMGZFiuOVFyGWFKHfsL430noM5fphpcVbWqkVXeioHMS59onUNI1Cd4VF8r7pnGhz43SK9Mo7JpCrmYS6a3jSJFbcKTRgH0115FMfveXtUKlboesf3j5jTspkCoY89QUDhfVIlvtwGmlFdltdpzrINN2E gVN4kZ5Pe4kdc5jaz2KaS1OnC82YZvG03YKxlDvGgYicRoz7kaUBZleuApvMpgjdG6UiaR4uQlI45KjUhR2HDmssMDOkuAud0zyHX8hlW9xNiAGykqJ44123GoyYrEWiN2XtRjW8UgdlTqUCZpAmWm8AqDOenkXdZPTuG4oAUH6oxkIjOSmsnxVZNIa58H8zvLfa2X0JMLP9nmRnKLCwcv2bG7zoK4KgOi SOILB/AwXIFRp1ToGxOiVTuYlxuxBapsVvCYH jBYfldhxXuZCqvoshMviicw5B2l9Ygz hlprgVWiAf6kR4XwTYmqIgcSCKIEe0STCMpphmnGjuFHu4kh6tUuyHi12CIYQX2NCYoMNh5qd2CNzYkOFFd4lFviW27Be94I1 AvtzRPwK7NhXakZPsUMvPL18Cu8jogLenISI0Lze9FMmJTNqdcOQtzSge0XDdhRbUKCdALcahu8i00eiH FHQF8JwIHfmUNXkJDTkdzdI/W JQY4V0wio/ODiFaZEBo4QCqVJ2gbI5Q3QmJug9bhQbEVlsQITATuBF ZGr/ykkECacRfHEWG4ZfXcbf6FTf8OQCyZ5/pXPVhPYUj FzPoNP8q6hXtMHyubk1zYudYwYsKlkAFtEFniTZ tbZiWNDgSJ3Pi06ntslNxCqP4P1uAfdHXc9eToHh2A1vryrNgksCKCb8SatB506RlQNic557zLPj PgIw2rCsaw7oSE9ZfmECgwEUANxBSexthDfex2bDEGiyju exJxdSS03mVmv5dmytcSCk0owPkuRwEOZRwuYkJJ8Qd i02Fulxcd0ep6FnX4GG2vmCegBwi89QYTxJWvwL7r7FkjuKcLq72FDzU0Ei2cQVT8Dbq2T3AeD3eKr6NRdA2VzYhL2BWfzyld69GZ8mDNE3hir5wLpM6bT8x z3LdoYfoZQutuI7rpFrY1zuGLaifWZA2AsigzJiFh9b/imwPfMtrBQSSKeuFTNsEazHkMBO8wWJxZwHblA8TIb OrhllPb6KgF5RFmR44FTcuLiAxKWl5wmFHWLEO6/lTr0 wSfoQn8mfYYvqOSLbXnhia vPiG1bRLz6B8S13MfXslvkjZpCaNE1UAZlUSaLX1VkbGzm8bTTGCefeDhv0HOCL6V3ECl/CK7yKaJbf0Ss5jl2dT7H7q6fEK95hp2Xn4Aru4sA0Rw2kx7aSxmUxWLfVASXKzp07Bjs9nGcbBj2fAfhDXewTfkI8e0LSOhYxC4SceoFcJsfYmPdHfhVODy1DtJzKOkYKIPFvV0h4RGZW6K4y60qJfRWOzKUJoSW6uErJK j5L4n6JrmMpRGUuMAraU9IeHh7/7LfCUff/ AwMBAhhvFXRFUlMFmHMOogYHuuskTdE1zdI/W0Fraw7a/v7y9vYO91q4Ve3l5ufz8fJeCAgNAw5esaY7u0Rq2/C3icP4DFtcbQq8SK64AAAAASUVORK5CYII=" />
</svg>
Thanks in advance.
CodePudding user response：
Since the width and the height of the svg element are in pts and you have a viewBox width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5", you can use user units (no units) and everything in the svg element will be in pts. User units are units in the current user coordinate system.
In order to center the image in the middle of the circle you need to place it at x = cx - 12 and y = cy - 12 where cx and cy are the coords for the center of the circle and 12 = 24/2; 24 beeing the width and height of the image.
In order to know the width and the height of the image you can use the getBBox() method.
console.log(img.getBBox())<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5">
<circle stroke="blue" stroke-width="3" cx="131.31" cy="455.9" r="74.34" fill-opacity=".1" />
<image id="img" x="119.31" y="443.9" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2 oZAAABgpJREFUSEuNlflTU1cUx/N/1P7UKUUE2aqAUlqLoVhQKg7iXhdQkaKsgrIHhGwCYQsmJAQJYROMYTWQlxUSQghQxX2tMG3t2GmntLZ0hm/vDU9nnDqO35kzuXPuOZ/vue N G8Syk8XnCmUCwua1K4FNr pa5RBjSUZM0jObqXkscLZsvfX9lCYUBRk4LRmm0rjNmMtrbLOJ2Vi6TUdCSdSkdGTh7aSY6xmEFraG12uTCAbX 38uuaMlUDI8tGiwWp6TnIKK1CbTeDXvs99DkfQWO7h4bhWRQq nEiX4jvMnNhslqgGhxZpr0s5u0qaJSJBiYcaLgkQzJpVhpuQjE2j/qhWUj63RBrXbjQM4lCzTjy1eMo6LCjuGMCB3P4kJIe2nueMFjcm6LuuvFJCGskyKnrxsX GQivuiAgIbrmhlDnBr/PhdIeJwo0dmS12pAqN KUjMGZFiuOVFyGWFKHfsL430noM5fphpcVbWqkVXeioHMS59onUNI1Cd4VF8r7pnGhz43SK9Mo7JpCrmYS6a3jSJFbcKTRgH0115FMfveXtUKlboesf3j5jTspkCoY89QUDhfVIlvtwGmlFdltdpzrINN2E gVN4kZ5Pe4kdc5jaz2KaS1OnC82YZvG03YKxlDvGgYicRoz7kaUBZleuApvMpgjdG6UiaR4uQlI45KjUhR2HDmssMDOkuAud0zyHX8hlW9xNiAGykqJ44123GoyYrEWiN2XtRjW8UgdlTqUCZpAmWm8AqDOenkXdZPTuG4oAUH6oxkIjOSmsnxVZNIa58H8zvLfa2X0JMLP9nmRnKLCwcv2bG7zoK4KgOi SOILB/AwXIFRp1ToGxOiVTuYlxuxBapsVvCYH jBYfldhxXuZCqvoshMviicw5B2l9Ygz hlprgVWiAf6kR4XwTYmqIgcSCKIEe0STCMpphmnGjuFHu4kh6tUuyHi12CIYQX2NCYoMNh5qd2CNzYkOFFd4lFviW27Be94I1 AvtzRPwK7NhXakZPsUMvPL18Cu8jogLenISI0Lze9FMmJTNqdcOQtzSge0XDdhRbUKCdALcahu8i00eiH FHQF8JwIHfmUNXkJDTkdzdI/W JQY4V0wio/ODiFaZEBo4QCqVJ2gbI5Q3QmJug9bhQbEVlsQITATuBF ZGr/ykkECacRfHEWG4ZfXcbf6FTf8OQCyZ5/pXPVhPYUj FzPoNP8q6hXtMHyubk1zYudYwYsKlkAFtEFniTZ tbZiWNDgSJ3Pi06ntslNxCqP4P1uAfdHXc9eToHh2A1vryrNgksCKCb8SatB506RlQNic557zLPj PgIw2rCsaw7oSE9ZfmECgwEUANxBSexthDfex2bDEGiyju exJxdSS03mVmv5dmytcSCk0owPkuRwEOZRwuYkJJ8Qd i02Fulxcd0ep6FnX4GG2vmCegBwi89QYTxJWvwL7r7FkjuKcLq72FDzU0Ei2cQVT8Dbq2T3AeD3eKr6NRdA2VzYhL2BWfzyld69GZ8mDNE3hir5wLpM6bT8x z3LdoYfoZQutuI7rpFrY1zuGLaifWZA2AsigzJiFh9b/imwPfMtrBQSSKeuFTNsEazHkMBO8wWJxZwHblA8TIb OrhllPb6KgF5RFmR44FTcuLiAxKWl5wmFHWLEO6/lTr0 wSfoQn8mfYYvqOSLbXnhia vPiG1bRLz6B8S13MfXslvkjZpCaNE1UAZlUSaLX1VkbGzm8bTTGCefeDhv0HOCL6V3ECl/CK7yKaJbf0Ss5jl2dT7H7q6fEK95hp2Xn4Aru4sA0Rw2kx7aSxmUxWLfVASXKzp07Bjs9nGcbBj2fAfhDXewTfkI8e0LSOhYxC4SceoFcJsfYmPdHfhVODy1DtJzKOkYKIPFvV0h4RGZW6K4y60qJfRWOzKUJoSW6uErJK j5L4n6JrmMpRGUuMAraU9IeHh7/7LfCUff/ AwMBAhhvFXRFUlMFmHMOogYHuuskTdE1zdI/W0Fraw7a/v7y9vYO91q4Ve3l5ufz8fJeCAgNAw5esaY7u0Rq2/C3icP4DFtcbQq8SK64AAAAASUVORK5CYII=" />
</svg>