svg.js
svg.js copied to clipboard
svgdotjs
SVG.Circle.radius not working as expected
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?
This is indeed a bug. The way the current code is written for radius() does not allow for reading the value just setting it
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