CODEWITHSUNDEEP
svgsvg.js
Morten Najbjerg
Morten Najbjerg

Reputation: 197

How can i center a circle on an existing element in SVG (svg.js)?

Anyone who might be able to help out with this. Please take a look at this Codepen:

https://codepen.io/mortennajbjerg/pen/zYrEMOe

I have tried this:

SVG.on(document, 'DOMContentLoaded', () => {
  let canvas = SVG.get('australia-svg')

  let australia = canvas.select('[data-name="Australia"]')
  
  let pos = australia.rbox()

  let circle = canvas.circle(20)
    .fill('#900')
    .move(pos.x, pos.y)
})

I would like to center the circle in the middle of Australia, but I seem to be unable to do so? I am not allowed to change the existing SVG attributes in order to achieve the desired result.

Thank you for your advice.

Upvotes: 0

Views: 39

Answers (1)

Morten Najbjerg
Morten Najbjerg

Reputation: 197

Thanks to Fuzzyma I came up with this solution. I am posting it here for reference.

SVG.on(document, 'DOMContentLoaded', () => {
  let canvas = SVG.get('australia-svg')

  let australia = canvas.select('[data-name="Australia"]').get(0)
  
  let pos = australia.rbox(canvas)
  
  let x = pos.cx - 10
  let y = pos.cy - 10

  let circle = canvas.circle(20)
    .fill('#900')
    .center(x, y)
})
```

Upvotes: 0

Related Questions