Using TypeScript to Manipulate SVG Polyline Shapes

In my TypeScript 3.1.1 project in VS Code with an Aurelia setup, I am facing a challenge while trying to manipulate an SVG Polyline using TypeScript code. The issue arises when attempting to create a new SVGPoint object. The initial HTML structure is as follows:

<svg class="distance-polyline-svg" width="100%" height="100%" ref="distancePolylineSvg">
    <polyline points="100,100 300,100 200,300 500,300" style="stroke: rgba(6, 28, 129, 0.3); stroke-width: 5; fill: transparent" ref="distancePolyline" />
</svg>

The variables distancePolylineSvg and distancePolyline are declared as SVGElement and SVGPolylineElement respectively.

While accessing a point works fine with this.distancePolyline.points.getItem(i), creating a new point for use in methods like this.distancePolyline.points.replaceItem or this.distancePolyline.points.appendItem has proven to be challenging. Attempts at using new SVGPoint() resulted in a bad constructor error. Switching to new DOMPoint() helped, but issues arose when using it in replaceItem due to the expected parameter type being SVGPoint. Casting SVGElement or SVGPolygonElement did not work either. Additionally, neither of these elements have a method called createSVGPoint, and document.rootElement.createSVGPoint was unsuccessful as rootElement was null.

The main question remains - how can I generate a new SVGPoint to pass to the SVGPointList methods?

typescriptsvgaurelia

Answer №1

Check out the updated version of the gist.run with typings here:

In reference to Robert's comment, it is essential to specify your <svg> element as an SVGSVGElement.

Currently, the SVG DOM API specification lacks a method for accurately typing SVG elements obtained from HTML DOM elements. This gap is evident in TypeScript. However, the objects returned from the DOM API are indeed SVG DOM elements. Therefore, you must cast your HTML DOM queries and manually assign them the appropriate type as SVG DOM elements.

let svg: SVGSVGElement = <any>document.getElementById('svg');
let polyline: SVGPolylineElement = <any>svg.getElementById('polyline');
let point: SVGPoint = svg.createSVGPoint();
point.x = 0;
point.y = 0;
polyline.points.appendItem(point);

Utilizing Aurelia’s element.ref can enhance the readability of the code, despite essentially performing the same function.

view

<template>
  <svg element.ref="svg">
    <polyline element.ref="polyline"></polyline>
  </svg>
</template>

view-model

export class SVGViewModel {
  svg: SVGSVGElement;
  polyline: SVGPolylineElement;
  addPoint(x: number, y: number) {
    const point: SVGPoint = this.svg.createSVGPoint();
    point.x = x
    point.y = y;
    this.polyline.points.appendItem(point)
  }
}

Answer №2

Ensure that your <svg> element is represented as an SVGSVGElement, since they provide a createSVGPoint method to retrieve an `SVGPoint` object.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Explaining the union type using a list of data types

Is there a way to create a union type that strictly limits values to 'a', 'b', 'c' when using a list like const list: string[] = ['a', 'b', 'c']? I know one method is: const list = ['a' ...

typescript

Efficiently convert Map keys into a Set in Javascript without the need to copy and rebuild the set

Even though I am capable of const set = new Set(map.keys()) I don't want to have to rebuild the set. Additionally, I prefer not to create a duplicate set for the return value. The function responsible for returning this set should also have the abili ...

javascripttypescript

The declaration file for the datepicker module could not be located, even though the necessary types have been installed

I'm encountering an issue during production build on my Next.js project. The error message reads: Could not find a declaration file for module 'react-datepicker'. '../node_modules/react-datepicker/dist/index.js' implicitly has an ...

reactjstypescripttypesreact-datepicker

Issue with dynamically typed object properties in Typescript codebases

Check out this TypeScript code snippet: export type Mutation = (state: State, data: unknown) => void export type Mutations = { [key: string]: Mutation } private buildMutations(): Mutations { return { ['3']: (state, data) => ...

typescript

Investigating the issue: Why is my React Typescript canvas image resizing component producing small, fuzzy images from high-quality, large images

I have developed a small image resizer but am facing an issue with the output images being blurry, especially when working with large images. import React, { useState } from 'react'; interface PropsInterface { placeholder: string; resizeTo: ...

reactjstypescriptcanvas

What is the safest method to convert a nested data structure into an immutable one while ensuring type safety when utilizing Immutable library?

When it comes to dealing with immutable data structures, Immutable provides the handy fromJs function. However, I've been facing issues trying to integrate it smoothly with Typescript. Here's what I've got: type SubData = { field1: strin ...

typescriptimmutable.js

Using React-Bootstrap with TypeScript in your project

I'm currently working on creating a navigation bar using react-bootstrap. I've already installed the node-module as follows: "@types/react-bootstrap": "^0.32.11",. However, when I try to use it in my hello.tsx component, I encounter a compile err ...

reactjstypescriptreact-bootstrap

What is the reason behind VS Code not showing an error when executing the command line tsc shows an error message?

Deliberately introducing a typo in my code results in an error. Here is the corrected code: declare const State: TwineState; If I remove the last character and then run tsc on the command line, it throws this error: tsc/prod.spec.ts:7:22 - error TS2304: ...

typescriptvisual-studio-codeeslinttypescript-eslint

Implementing dynamic image insertion on click using a knockout observable

I'm utilizing an API to retrieve images, and I need it to initially load 10 images. When a button is clicked, it should add another 10 images. This is how I set it up: Defining the observable for the image amount: public imageAmount: KnockoutObserva ...

javascriptknockout.jstypescript

Having trouble with Next.js 13 GitHub OAuth integration - it keeps redirecting me to Discord instead of signing me in

There's a perplexing issue troubling my application... The implementation of OAuth 2 with GitHub, Discord, and Google is causing some trouble. While Google and Discord authentication works smoothly, attempting to sign in via GitHub redirects me to Di ...

typescriptnext.jsoauth-2.0oauthreact-fullstack

Determining block time based on block number within Polygon Mumbai Testnet

Is there a dependable method to identify the production time of a specific block in Polygon Mumbai Testnet using only its block number? I am unable to utilize an Api for this purpose and am seeking a more user-friendly computational solution. Any suggest ...

typescriptblockchainpolygonevm

Converting an object into an array using React and TypeScript

Extracted from a form is an object with input, output, and outputType fields that can vary between number, string, and boolean types. To display the information in a table without the output type, I have created a mapped obj. However, I also need to prese ...

reactjstypescriptdictionaryobject

What is the best way to implement an Angular Guard that utilizes an API service for validation and redirects in case of failure?

Hello there! I am currently working on an Angular 7 application that deals with time cards. One of the main features I have implemented is a CanActivate Guard for controlling access to certain components. The CanActivate code utilizes Observables to decid ...

angulartypescriptobservableangular-routingangular-guards

What is the best way to trigger a useReducer dispatch function from a different file that is not a React component, without relying on Redux?

In my project, I have a function component that shows a game board named "EnemyBoardComponent.tsx" const enemyBoardReducer = (state:number[][], action:Action)=>{ switch(action.type){ case "update": { return EnemyBoard.getGrid(); ...

javascriptreactjstypescriptredux

Verification of unique custom string

How can I ensure that a string follows the specific format of x.xx.xxxxx? The first character is mandatory, followed by a period, then two characters, another period, and finally any number of characters of varying lengths. ...

javascripttypescriptformikyup

Troubleshooting the display of API-generated lists in Angular 8

I am encountering an issue in Angular 8 when trying to display my list on a page. Below is the code from my proposal-component.ts file: import { Component, OnInit, Input } from "@angular/core"; import { ActivatedRoute, Params } from "@angular/router"; imp ...

javascriptangulartypescript

What is the best way to implement switchMap when dealing with a login form submission?

Is there a better way to prevent multiple submissions of a login form using the switchMap operator? I've attempted to utilize subjects without success. Below is my current code. import { Subject } from 'rxjs'; import { Component, Output } ...

javascriptangulartypescriptrxjs

What is the proper way to specifically define a new property on the `global` object in TypeScript?

I want to define a type signature for the variable below: (global as any).State = { variables: {}, }; How can I declare the type of State? If I try (global as any).State: Something = ..., the compiler displays an error message saying ; expected. It se ...

node.jstypescript

Using GSAP in an Ionic application

What is the best way to add the GSAP library to an Ionic project? Simply running npm install gsap doesn't seem to work when I try to import it using: import { TweenMax, TimelineMax} from "gsap"; I am currently using TypeScript. Thank you. ...

typescriptionic-frameworkgsap

The interface IJobDetails cannot be assigned to type null

https://i.sstatic.net/cVVSs.png In the code snippet below, I have created an interface called ClientState1. Now, I am attempting to define a constant named descriptionJobDetails with the type ClientState1, specifically for IJobDetails. However, I am encou ...

c#jqueryangulartypescriptinterface