Styjun

Playing boules... IN SPACE!

If the government illegally doesn't ask for article 50 extension, can parliament do it instead?

Can Russians naturally pronounce "попал в бесперспективняк"?

Should we run PBKDF2 for every plaintext to be protected or should we run PBKDF2 only once?

Can UV radiation be safe for the skin?

From not IT background to being a programmer

How to use a tikzpicture as a node shape

How to find better food in airports

An alternative to "two column" geometry proofs

Heuristic argument for the Riemann Hypothesis

Cheap oscilloscope showing 16 MHz square wave

Is it good practice to speed up and slow down where not written in a song?

How can I store milk for long periods of time?

Received email from ISP saying one of my devices has malware

Can a system of three stars exist?

What are the electrical characteristics of a PC gameport?

Visiting girlfriend in the USA

Shell script to set up Ant targets and properties for a new project

Tasha's Hideous Laughter used on a deaf person?

Why didn't Thatcher give Hong Kong to Taiwan?

What is the maximal acceptable delay between pilot's input and flight control surface actuation?

Can a human variant take proficiency in initiative?

When do we use "no women" instead of "no woman"?

Using large parts of a research paper

Selecting an SVG Circle with TypeScript

How can I select an element by name with jQuery?What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?Do I use <img>, <object>, or <embed> for SVG files?How to calculate the SVG Path for an arc (of a circle)What is TypeScript and why would I use it in place of JavaScript?How do you explicitly set a new property on `window` in TypeScript?get and set in TypeScriptAre strongly-typed functions as parameters possible in TypeScript?TypeScript Converting a String to a numberTypescript: Interfaces vs Types

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have a very simple SVG <circle> element in my DOM that I want to select with TypeScript:

<svg viewBox="0 0 200 200">
 <circle cx="50" cy="50" r="45" id="myCircle"/>
</svg>

---

First attempt:

I try to select the circle as follows:

var circle: SVGCircleElement = document.getElementById("myCircle");

but I get the error:

Type 'HTMLElement' is missing the following properties: cx, cy, r.

Ok, fair enough. So I try type-assertion:

Second attempt:

var circle: SVGCircleElement = (<SVGCircleElement>document.getElementById("myCircle"));

and I get the error:

Conversion of type HTMLElement to SVGCircleElement may be a mistake because...

This method of selecting elements seems to work with other elements, such as a <canvas> but not for SVGs:

Question:

What is the TypeScript-approved way of selecting myCircle from the DOM, preferably without resorting to type coercion? (By the way, I'm using Typescript 3.3)

typescript dom svg

share|improve this question

edited Jun 12 at 18:39

Marquizzo

asked Mar 28 at 0:52

MarquizzoMarquizzo

7,54866 gold badges2121 silver badges4646 bronze badges

add a comment | 

0

I have a very simple SVG <circle> element in my DOM that I want to select with TypeScript:

<svg viewBox="0 0 200 200">
 <circle cx="50" cy="50" r="45" id="myCircle"/>
</svg>

---

First attempt:

I try to select the circle as follows:

var circle: SVGCircleElement = document.getElementById("myCircle");

but I get the error:

Type 'HTMLElement' is missing the following properties: cx, cy, r.

Ok, fair enough. So I try type-assertion:

Second attempt:

var circle: SVGCircleElement = (<SVGCircleElement>document.getElementById("myCircle"));

and I get the error:

Conversion of type HTMLElement to SVGCircleElement may be a mistake because...

This method of selecting elements seems to work with other elements, such as a <canvas> but not for SVGs:

Question:

What is the TypeScript-approved way of selecting myCircle from the DOM, preferably without resorting to type coercion? (By the way, I'm using Typescript 3.3)

typescript dom svg

share|improve this question

edited Jun 12 at 18:39

Marquizzo

asked Mar 28 at 0:52

MarquizzoMarquizzo

7,54866 gold badges2121 silver badges4646 bronze badges

add a comment | 

I have a very simple SVG <circle> element in my DOM that I want to select with TypeScript:

<svg viewBox="0 0 200 200">
 <circle cx="50" cy="50" r="45" id="myCircle"/>
</svg>

---

First attempt:

I try to select the circle as follows:

var circle: SVGCircleElement = document.getElementById("myCircle");

but I get the error:

Type 'HTMLElement' is missing the following properties: cx, cy, r.

Ok, fair enough. So I try type-assertion:

Second attempt:

var circle: SVGCircleElement = (<SVGCircleElement>document.getElementById("myCircle"));

and I get the error:

Conversion of type HTMLElement to SVGCircleElement may be a mistake because...

This method of selecting elements seems to work with other elements, such as a <canvas> but not for SVGs:

Question:

What is the TypeScript-approved way of selecting myCircle from the DOM, preferably without resorting to type coercion? (By the way, I'm using Typescript 3.3)

typescript dom svg

share|improve this question

edited Jun 12 at 18:39

Marquizzo

asked Mar 28 at 0:52

MarquizzoMarquizzo

7,54866 gold badges2121 silver badges4646 bronze badges

<svg viewBox="0 0 200 200">
 <circle cx="50" cy="50" r="45" id="myCircle"/>
</svg>

share|improve this question

edited Jun 12 at 18:39

Marquizzo

asked Mar 28 at 0:52

MarquizzoMarquizzo

7,54866 gold badges2121 silver badges4646 bronze badges

share|improve this question

edited Jun 12 at 18:39

Marquizzo

asked Mar 28 at 0:52

MarquizzoMarquizzo

7,54866 gold badges2121 silver badges4646 bronze badges

asked Mar 28 at 0:52

MarquizzoMarquizzo

7,54866 gold badges2121 silver badges4646 bronze badges

asked Mar 28 at 0:52

MarquizzoMarquizzo

7,54866 gold badges2121 silver badges4646 bronze badges

1 Answer
1

active

oldest

votes

1

this is atleast one way is to define typeguards which allow you to prove to typescript that is indeed a circle, there is no "best way" it really depends on the use case but i feel like this is a stronger approach to casting.

const isHTMLCircle = (something: HTMLElement | SVGCircleElement): something is SVGCircleElement => 
 if(!something) return false;
 return something instanceof SVGCircleElement;


const getSvgCircleById = (id: string): SVGCircleElement | null => 
 const element = document.getElementById("id");
 if(!element) return null;
 if(isHTMLCircle(element)) 
 return element;
 
 return null;

share|improve this answer

edited Mar 28 at 1:25

answered Mar 28 at 1:12

Shanon JacksonShanon Jackson

1,85555 silver badges1616 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So the only way to do it is by still casting to the <any> type? I'm surprised TypeScript doesn't have a built-in way of doing this...
  
  – Marquizzo
  Mar 28 at 1:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you don't need to cast i'll edit snippet and no there is nothing built in that let's you do this because there is no getSvgById in javascript, getElementById can't possibly know through static analysis the type of the element you're trying to get.
  
  – Shanon Jackson
  Mar 28 at 1:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Iv'e added a edit with a getSvgCricleById function that allows you to get a SVG circle type back there is no casting to any
  
  – Shanon Jackson
  Mar 28 at 1:25
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Darn... that's a lot of code for a simple element selector. I think I'll stick to myCircle: SVGCircleElement = <any>document.getElementById("myCircle"); I appreciate your help, though!
  
  – Marquizzo
  Mar 28 at 1:53
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  the problem with casting is that it doesn't handle the case of it the element at id "myCircle" wasn't actually a circle but you've lied to typescript and told it it is a circle. Guards give you a way to prove something is indeed a circle
  
  – Shanon Jackson
  Mar 28 at 1:57
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55388608%2fselecting-an-svg-circle-with-typescript%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

this is atleast one way is to define typeguards which allow you to prove to typescript that is indeed a circle, there is no "best way" it really depends on the use case but i feel like this is a stronger approach to casting.

const isHTMLCircle = (something: HTMLElement | SVGCircleElement): something is SVGCircleElement => 
 if(!something) return false;
 return something instanceof SVGCircleElement;


const getSvgCircleById = (id: string): SVGCircleElement | null => 
 const element = document.getElementById("id");
 if(!element) return null;
 if(isHTMLCircle(element)) 
 return element;
 
 return null;

share|improve this answer

edited Mar 28 at 1:25

answered Mar 28 at 1:12

Shanon JacksonShanon Jackson

1,85555 silver badges1616 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So the only way to do it is by still casting to the <any> type? I'm surprised TypeScript doesn't have a built-in way of doing this...
  
  – Marquizzo
  Mar 28 at 1:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you don't need to cast i'll edit snippet and no there is nothing built in that let's you do this because there is no getSvgById in javascript, getElementById can't possibly know through static analysis the type of the element you're trying to get.
  
  – Shanon Jackson
  Mar 28 at 1:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Iv'e added a edit with a getSvgCricleById function that allows you to get a SVG circle type back there is no casting to any
  
  – Shanon Jackson
  Mar 28 at 1:25
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Darn... that's a lot of code for a simple element selector. I think I'll stick to myCircle: SVGCircleElement = <any>document.getElementById("myCircle"); I appreciate your help, though!
  
  – Marquizzo
  Mar 28 at 1:53
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  the problem with casting is that it doesn't handle the case of it the element at id "myCircle" wasn't actually a circle but you've lied to typescript and told it it is a circle. Guards give you a way to prove something is indeed a circle
  
  – Shanon Jackson
  Mar 28 at 1:57
  

  
  
  
  

add a comment | 

1

this is atleast one way is to define typeguards which allow you to prove to typescript that is indeed a circle, there is no "best way" it really depends on the use case but i feel like this is a stronger approach to casting.

const isHTMLCircle = (something: HTMLElement | SVGCircleElement): something is SVGCircleElement => 
 if(!something) return false;
 return something instanceof SVGCircleElement;


const getSvgCircleById = (id: string): SVGCircleElement | null => 
 const element = document.getElementById("id");
 if(!element) return null;
 if(isHTMLCircle(element)) 
 return element;
 
 return null;

share|improve this answer

edited Mar 28 at 1:25

answered Mar 28 at 1:12

Shanon JacksonShanon Jackson

1,85555 silver badges1616 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So the only way to do it is by still casting to the <any> type? I'm surprised TypeScript doesn't have a built-in way of doing this...
  
  – Marquizzo
  Mar 28 at 1:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you don't need to cast i'll edit snippet and no there is nothing built in that let's you do this because there is no getSvgById in javascript, getElementById can't possibly know through static analysis the type of the element you're trying to get.
  
  – Shanon Jackson
  Mar 28 at 1:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Iv'e added a edit with a getSvgCricleById function that allows you to get a SVG circle type back there is no casting to any
  
  – Shanon Jackson
  Mar 28 at 1:25
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Darn... that's a lot of code for a simple element selector. I think I'll stick to myCircle: SVGCircleElement = <any>document.getElementById("myCircle"); I appreciate your help, though!
  
  – Marquizzo
  Mar 28 at 1:53
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  the problem with casting is that it doesn't handle the case of it the element at id "myCircle" wasn't actually a circle but you've lied to typescript and told it it is a circle. Guards give you a way to prove something is indeed a circle
  
  – Shanon Jackson
  Mar 28 at 1:57
  

  
  
  
  

add a comment | 

this is atleast one way is to define typeguards which allow you to prove to typescript that is indeed a circle, there is no "best way" it really depends on the use case but i feel like this is a stronger approach to casting.

const isHTMLCircle = (something: HTMLElement | SVGCircleElement): something is SVGCircleElement => 
 if(!something) return false;
 return something instanceof SVGCircleElement;


const getSvgCircleById = (id: string): SVGCircleElement | null => 
 const element = document.getElementById("id");
 if(!element) return null;
 if(isHTMLCircle(element)) 
 return element;
 
 return null;

share|improve this answer

edited Mar 28 at 1:25

answered Mar 28 at 1:12

Shanon JacksonShanon Jackson

1,85555 silver badges1616 bronze badges

const isHTMLCircle = (something: HTMLElement | SVGCircleElement): something is SVGCircleElement => 
 if(!something) return false;
 return something instanceof SVGCircleElement;


const getSvgCircleById = (id: string): SVGCircleElement | null => 
 const element = document.getElementById("id");
 if(!element) return null;
 if(isHTMLCircle(element)) 
 return element;
 
 return null;

share|improve this answer

edited Mar 28 at 1:25

answered Mar 28 at 1:12

Shanon JacksonShanon Jackson

1,85555 silver badges1616 bronze badges

answered Mar 28 at 1:12

Shanon JacksonShanon Jackson

1,85555 silver badges1616 bronze badges

answered Mar 28 at 1:12

Shanon JacksonShanon Jackson

1,85555 silver badges1616 bronze badges