Как сразу указать координаты центра вращения элемента SVG?

Question

Поставить координаты круга по центру получается только с подбором это transform='rotate(-90 60 60)'
Как можно поставить координаты круга по центру сразу без подбора ?

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 120 120" >
  <!-- Фон серого цвета -->
  <rect x='0' y='0' width='100%' height='100%' fill='grey'/>
  <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
  <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='314; 0'
  />
  </circle>
  <text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text>
</svg>

Answer 1

Для определения размеров воспользуйтесь методом JS getBBox()

MDN web docs

getBBox() позволяет нам определить координаты самого маленького прямоугольника, в который помещается объект. Возвращаемые координаты относятся к текущему пространству svg, то есть после применения всех атрибутов геометрии ко всем элементам, содержащимся в целевом элементе.

Другими словами, мы можем получить координаты (x,y) верхнего левого угла прямоугольника, который описывает круг, в вашем примере
Ширину и высоту этого прямоугольника - width, height

Вычисляем координаты центра окружности

let bb = circ.getBBox();

console.log(bb.x + bb.width / 2)
console.log(bb.y + bb.height / 2)

Ниже полный пример

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 120 120" >
  <!-- Фон серого цвета -->
  <rect x='0' y='0' width='100%' height='100%' fill='grey'/>
  <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
  <circle id="circ" r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='314; 0'
  />
  </circle>
  <text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text>
</svg> 
<script> 
let bb = circ.getBBox();

console.log(bb.x + bb.width / 2)
console.log(bb.y + bb.height / 2)
</script>

БЛОГ НА HUSL

Как сразу указать координаты центра вращения элемента SVG?

Ответы (1 шт):