Draw and position a circle at the same place of a base64 png:image

user_15186 0
Viewed 39

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,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" />
</svg>

Thanks in advance.

svg
1 Answers

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>

user_78973950
Related