Как в анимированный SVG вставить изображение?

Question

[Cheizer]

Подскажите пожалуйста, сгенерировал на сервисе лоадер, и хочу в него вставить логотип по центру, внутри круга с анимацией, как это можно сделать?

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="32" stroke-width="3" stroke="#2d59b2" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round">
  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
</circle>

Вот он круг, внутрь него хочу вставить статический лого.
https://codepen.io/Cheizer/pen/NWrewJb

Comments

[Максим]

просто тег image который расположите по центру круга и всё, разумеется не забудьте width и height

[Cheizer]

Много Чего, так не получиться, рисунок не позиционируется в круге, он улетает к краю экрана

[Максим]

Cheizer, там снизу, ответ дали , вот так надо

[Cheizer]

Много Чего, спасибо.

Answer 1

[twolegs]

Тег image, расположить в координатах (svgWidth - imgWidth) / 2, аналогично для высоты

https://codepen.io/two-legs/pen/OJXrzbW

Comments

[Cheizer]

БЛАГОДАРЮ!