micheldrescher commented 3 years ago

Bug report

I use SVG.js version 3.0.16 with Node.js 13 and Jest.

Using Javascript, I create a circle element like so:

import { SVG } from '@svgdotjs/svg.js'
const circle = SVG().circle().radius(10).center(0, 0)
    .attr('stroke-dasharray', `${dashLen},${dashPause}`)
    .attr('stroke-dashoffset', offset)
    .attr('stroke-width', width)
    .attr('stroke', `${colour}`)
    .attr('fill', 'none')

To print some attribute values I use the following code:

    console.log(circle.cx())
    console.log(circle.cy())
    console.log(circle.attr('r'))
    console.log(circle.radius())

Weh runniing the code, get three times the expected values, 0, 0, and 10 respectively - but the last line throws the following eror: TypeError: this.rx(...).ry is not a function whereas itshould return the value 10 as well, according to the documentation when using radius() as a getter.

Can you help out, please?

Fuzzyma commented 3 years ago

This is indeed a bug. The way the current code is written for radius() does not allow for reading the value just setting it

micheldrescher commented 3 years ago

I did a quick test cloning the repo, building the distro and using that in a straightforward javascript code block:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SVG Playground</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Color Playground</h1>

    <p>Lets test the different types of random colors we can make</p>

    <svg viewBox="0 0 1500 1500" id="canvas"></svg>
  </body>

  <script src="../../dist/svg.js" charset="utf-8"></script>
  <script src="main.js" charset="utf-8"></script>
</html>

main.js

const canvas = SVG("#canvas").group().translate(-150, 230);

console.log("Creating circle!");
const circle = canvas.circle().center(200, 400).radius(500);

console.log('Calling circle.attr("r")');
console.log(circle.attr("r"));

console.log("calling circle.radius as getter!");
console.log(circle.radius());

This works as expected.

However when using it in a 'non-lab" environment, e.g. using Jest to test my code, or node and parcel, it suspect babel's transpiling might get in the way here...

Since a workaround exists (i.e. circle.attr('r')) this is minor.

Thanks, Michel

Fuzzyma commented 1 year ago

i assume this was fixed because i cant reproduce it anymore

svgdotjs / svg.js

SVG.Circle.radius not working as expected #1157

Bug report