svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
10.95k stars 1.07k forks source link

Size inconsistency when setting circle radius using different methods #1282

Closed jamesgrubb closed 1 year ago

jamesgrubb commented 1 year ago

Bug report

Fiddle

Example

Explanation

If I set a circle's radius with circle(50).cx(50).cy(50) I would expect the following svg in the DOM

<circle r="50" cx="50" cy="50" ></circle>

Instead, the result is

<circle r="25" cx="50" cy="50" ></circle>

However, if I set the circles radius using circle().radius(50) the result is

<circle r="50" cx="50" cy="50" ></circle>
Fuzzyma commented 1 year ago

Because you are setting the size of the circle and not the radius. All svg.js methods for simple shapes take the size to create the shape. That way you don't need to think about which type of shape you are dealing with

jamesgrubb commented 1 year ago

Got it, thank you fro your time explaining this methodology. I love how svg.js is so rich.