Exploring the capabilities of the svg.js library with typescript has presented some challenges when it comes to utilizing CSS selectors. My goal is to select an SVG element using the select() method with a class selector. In this interactive example, this works seamlessly in JavaScript:
var circleTwo = SVG.select('circle.circle-01');
However, the same approach does not seem to work in TypeScript. The library is imported as follows:
import * as SVG from 'svg.js';
A closer look reveals that hover information on the select() method includes details about a second parameter:
Yet, as per the official documentation,
Additionally, a second argument can be passed to define the parent element to search in.
This optional argument implies that you should be able to use the select() method without specifying it:
var elements = SVG.select('rect.my-class').fill('#f06');
Through trial and error, I managed to resolve one error (although I question if this is the correct approach?), but encountered another obstacle when trying to implement a click() event on the selected element:
Property 'click' does not exist on type 'Set'.
To demonstrate this issue, let's consider the simple testMe() method designed to test the functionality of the click() event on the selected element:
testMe() {
alert('it works even better!');
}
Where am I going wrong in this process?