Styjun

How many oliphaunts died in all of the Lord of the Rings battles?

How can religions be structured in ways that allow inter-faith councils to work?

How to politely refuse a startup's equity?

What is the most common end of life issue for a car?

Is there an antonym for "spicy" or "hot" regarding food (NOT "seasoned" but "spicy")?

How can I write an interdental lateral in phonetic transcription?

How to kill my goat in Goat Simulator

How did Mysterio have these drones?

Sea level static test of an upper stage possible?

Learning Minor scales through 7 patterns (Guitar)

How did the SysRq key get onto modern keyboards if it's rarely used?

Commercial jet accompanied by small plane near Seattle

Word for showing a small part of something briefly to hint to its existence or beauty without fully uncovering it

How to check what is edible on an alien world?

Examples of simultaneous independent breakthroughs

Is there a list of words that will enable the second player in two-player Ghost to always win?

Are the named pipe created by `mknod` and the FIFO created by `mkfifo` equivalent?

Is there a wealth gap in Boston where the median net worth of white households is $247,500 while the median net worth for black families was $8?

Recommendations or Experiences on Archiving Mailing Data

Is it legal to use cash pulled from a credit card to pay the monthly payment on that credit card?

How did the Axis intend to hold the Caucasus?

Is cardinality continuous?

Melee or Ranged attacks by Monsters, no distinction in modifiers?

Why was Sauron preparing for war instead of trying to find the ring?

JavaScript: How to make an alert dialog appear when clicking an SVG element?

How do I detect a click outside an element?How to execute a JavaScript function when I have its name as a stringHow do I make the first letter of a string uppercase in JavaScript?How to insert an element after another element in JavaScript without using a library?How do I remove a particular element from an array in JavaScript?How can I add new array elements at the beginning of an array in Javascript?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itAccessing elements of an <embed> SVG with JavascriptJavaScript Click Boolean to select and unselect svg element.Can't target svg element with query selector

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

1

I am having trouble getting an event listener to work for click event's on SVG elements in my web page.

Right now, it is displaying the first dialog whenever the page loads (the title of cercle). What I want it to do is display the alert message only when that particular SVG element (or section) of the SVG image is clicked. I also what the alert to display if the an SVG element is clicked again.

Please help as I am really stumped on this one.

The code I'm currently using is:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

cercle.addEventListener("click" , showCercleTitle());
path.addEventListener("click" , showPathTitle());
rectangle.addEventListener("click" , showRectTitle());

The id and references are correct, as it is displaying the correct titles, but only once and for the cercle and then nothing else.

Thank you!

javascript svg addeventlistener

share|improve this question

edited Mar 26 at 22:48

Dacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

asked Mar 26 at 18:57

Lorenzo BattilocchiLorenzo Battilocchi

1061010 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  It's not cercle.addEventListener(onclick(showCercleTitle()));. It's circle.addEventListener("click", showCercleTitle); And, that's assuming that circle is an element that even has a click event.
  
  – Scott Marcus
  Mar 26 at 19:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ah ok! I fixed that part, but it's still not working...
  
  – Lorenzo Battilocchi
  Mar 26 at 19:02
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Because, as I said, circle (or whatever you are using addEventListener on) has to have the event you are listening for. If not, it's like waiting around for a cat to bark.
  
  – Scott Marcus
  Mar 26 at 19:08
  
  

  
  
  
  

add a comment | 

1

I am having trouble getting an event listener to work for click event's on SVG elements in my web page.

Right now, it is displaying the first dialog whenever the page loads (the title of cercle). What I want it to do is display the alert message only when that particular SVG element (or section) of the SVG image is clicked. I also what the alert to display if the an SVG element is clicked again.

Please help as I am really stumped on this one.

The code I'm currently using is:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

cercle.addEventListener("click" , showCercleTitle());
path.addEventListener("click" , showPathTitle());
rectangle.addEventListener("click" , showRectTitle());

The id and references are correct, as it is displaying the correct titles, but only once and for the cercle and then nothing else.

Thank you!

javascript svg addeventlistener

share|improve this question

edited Mar 26 at 22:48

Dacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

asked Mar 26 at 18:57

Lorenzo BattilocchiLorenzo Battilocchi

1061010 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  It's not cercle.addEventListener(onclick(showCercleTitle()));. It's circle.addEventListener("click", showCercleTitle); And, that's assuming that circle is an element that even has a click event.
  
  – Scott Marcus
  Mar 26 at 19:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ah ok! I fixed that part, but it's still not working...
  
  – Lorenzo Battilocchi
  Mar 26 at 19:02
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Because, as I said, circle (or whatever you are using addEventListener on) has to have the event you are listening for. If not, it's like waiting around for a cat to bark.
  
  – Scott Marcus
  Mar 26 at 19:08
  
  

  
  
  
  

add a comment | 

I am having trouble getting an event listener to work for click event's on SVG elements in my web page.

Right now, it is displaying the first dialog whenever the page loads (the title of cercle). What I want it to do is display the alert message only when that particular SVG element (or section) of the SVG image is clicked. I also what the alert to display if the an SVG element is clicked again.

Please help as I am really stumped on this one.

The code I'm currently using is:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

cercle.addEventListener("click" , showCercleTitle());
path.addEventListener("click" , showPathTitle());
rectangle.addEventListener("click" , showRectTitle());

The id and references are correct, as it is displaying the correct titles, but only once and for the cercle and then nothing else.

Thank you!

javascript svg addeventlistener

share|improve this question

edited Mar 26 at 22:48

Dacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

asked Mar 26 at 18:57

Lorenzo BattilocchiLorenzo Battilocchi

1061010 bronze badges

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

cercle.addEventListener("click" , showCercleTitle());
path.addEventListener("click" , showPathTitle());
rectangle.addEventListener("click" , showRectTitle());

share|improve this question

edited Mar 26 at 22:48

Dacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

asked Mar 26 at 18:57

Lorenzo BattilocchiLorenzo Battilocchi

1061010 bronze badges

share|improve this question

edited Mar 26 at 22:48

Dacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

asked Mar 26 at 18:57

Lorenzo BattilocchiLorenzo Battilocchi

1061010 bronze badges

edited Mar 26 at 22:48

Dacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

edited Mar 26 at 22:48

Dacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

asked Mar 26 at 18:57

Lorenzo BattilocchiLorenzo Battilocchi

1061010 bronze badges

asked Mar 26 at 18:57

Lorenzo BattilocchiLorenzo Battilocchi

1061010 bronze badges

1 Answer
1

active

oldest

votes

0

If I understand your question correctly, the issue with your code is the () after each of your event handlers, when passing then to addEventListener(). Take for instance the cercle SVG element and showCercleTitle() handler:

cercle.addEventListener("click" , showCercleTitle()); //<-- () causing the issue

By passing showCercleTitle() with (), you're calling the showCercleTitle function immediately when passing it to addEventListener() as the click event handler. This means that the result of that call to showCercleTitle() (which is probably undefined?) is what will be used as the handler for the click event on the SVG element. To resolve this issue, consider removing the () on all event handler assignments, as shown below:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() 
 alert('showCercleTitle')


function showPathTitle() 
 alert('showPathTitle')


function showRectTitle() 
 alert('showRectTitle')


/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> 
</svg>

share|improve this answer

answered Mar 26 at 19:23

Dacre DennyDacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The () were a syntax problem, but that's not the real issue. The OP is trying to register a click event on an object that doesn't have a click event.
  
  – Scott Marcus
  Mar 26 at 19:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't see anything on that link relating to any supported events. You linked to methods. Methods are not events. This may help.
  
  – Scott Marcus
  Mar 26 at 20:32
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ScottMarcus oh sorry about that - I should have been clearer. The content of the link I sent you reads: SVGElement "inherits methods from its parent, Element" . The SVGElement therefore provides the addEventListener(), through which the click event can be "handled" on the corresponding SVGElement instance
  
  – Dacre Denny
  Mar 26 at 20:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You misunderstand. No one is disputing whether it has .addEventListner. The question is whether it has a click event.
  
  – Scott Marcus
  Mar 26 at 20:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Interesting - seems to be working as expected for me
  
  – Dacre Denny
  Mar 26 at 20:56
  

  
  
  
  

 | 
show 6 more comments

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%2f55364464%2fjavascript-how-to-make-an-alert-dialog-appear-when-clicking-an-svg-element%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

If I understand your question correctly, the issue with your code is the () after each of your event handlers, when passing then to addEventListener(). Take for instance the cercle SVG element and showCercleTitle() handler:

cercle.addEventListener("click" , showCercleTitle()); //<-- () causing the issue

By passing showCercleTitle() with (), you're calling the showCercleTitle function immediately when passing it to addEventListener() as the click event handler. This means that the result of that call to showCercleTitle() (which is probably undefined?) is what will be used as the handler for the click event on the SVG element. To resolve this issue, consider removing the () on all event handler assignments, as shown below:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() 
 alert('showCercleTitle')


function showPathTitle() 
 alert('showPathTitle')


function showRectTitle() 
 alert('showRectTitle')


/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> 
</svg>

share|improve this answer

answered Mar 26 at 19:23

Dacre DennyDacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The () were a syntax problem, but that's not the real issue. The OP is trying to register a click event on an object that doesn't have a click event.
  
  – Scott Marcus
  Mar 26 at 19:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't see anything on that link relating to any supported events. You linked to methods. Methods are not events. This may help.
  
  – Scott Marcus
  Mar 26 at 20:32
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ScottMarcus oh sorry about that - I should have been clearer. The content of the link I sent you reads: SVGElement "inherits methods from its parent, Element" . The SVGElement therefore provides the addEventListener(), through which the click event can be "handled" on the corresponding SVGElement instance
  
  – Dacre Denny
  Mar 26 at 20:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You misunderstand. No one is disputing whether it has .addEventListner. The question is whether it has a click event.
  
  – Scott Marcus
  Mar 26 at 20:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Interesting - seems to be working as expected for me
  
  – Dacre Denny
  Mar 26 at 20:56
  

  
  
  
  

 | 
show 6 more comments

0

If I understand your question correctly, the issue with your code is the () after each of your event handlers, when passing then to addEventListener(). Take for instance the cercle SVG element and showCercleTitle() handler:

cercle.addEventListener("click" , showCercleTitle()); //<-- () causing the issue

By passing showCercleTitle() with (), you're calling the showCercleTitle function immediately when passing it to addEventListener() as the click event handler. This means that the result of that call to showCercleTitle() (which is probably undefined?) is what will be used as the handler for the click event on the SVG element. To resolve this issue, consider removing the () on all event handler assignments, as shown below:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() 
 alert('showCercleTitle')


function showPathTitle() 
 alert('showPathTitle')


function showRectTitle() 
 alert('showRectTitle')


/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> 
</svg>

share|improve this answer

answered Mar 26 at 19:23

Dacre DennyDacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The () were a syntax problem, but that's not the real issue. The OP is trying to register a click event on an object that doesn't have a click event.
  
  – Scott Marcus
  Mar 26 at 19:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't see anything on that link relating to any supported events. You linked to methods. Methods are not events. This may help.
  
  – Scott Marcus
  Mar 26 at 20:32
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ScottMarcus oh sorry about that - I should have been clearer. The content of the link I sent you reads: SVGElement "inherits methods from its parent, Element" . The SVGElement therefore provides the addEventListener(), through which the click event can be "handled" on the corresponding SVGElement instance
  
  – Dacre Denny
  Mar 26 at 20:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You misunderstand. No one is disputing whether it has .addEventListner. The question is whether it has a click event.
  
  – Scott Marcus
  Mar 26 at 20:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Interesting - seems to be working as expected for me
  
  – Dacre Denny
  Mar 26 at 20:56
  

  
  
  
  

 | 
show 6 more comments

If I understand your question correctly, the issue with your code is the () after each of your event handlers, when passing then to addEventListener(). Take for instance the cercle SVG element and showCercleTitle() handler:

cercle.addEventListener("click" , showCercleTitle()); //<-- () causing the issue

By passing showCercleTitle() with (), you're calling the showCercleTitle function immediately when passing it to addEventListener() as the click event handler. This means that the result of that call to showCercleTitle() (which is probably undefined?) is what will be used as the handler for the click event on the SVG element. To resolve this issue, consider removing the () on all event handler assignments, as shown below:

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() 
 alert('showCercleTitle')


function showPathTitle() 
 alert('showPathTitle')


function showRectTitle() 
 alert('showRectTitle')


/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> 
</svg>

share|improve this answer

answered Mar 26 at 19:23

Dacre DennyDacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

cercle.addEventListener("click" , showCercleTitle()); //<-- () causing the issue

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() 
 alert('showCercleTitle')


function showPathTitle() 
 alert('showPathTitle')


function showRectTitle() 
 alert('showRectTitle')


/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> 
</svg>

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() 
 alert('showCercleTitle')


function showPathTitle() 
 alert('showPathTitle')


function showRectTitle() 
 alert('showRectTitle')


/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> 
</svg>

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() 
 alert('showCercleTitle')


function showPathTitle() 
 alert('showPathTitle')


function showRectTitle() 
 alert('showRectTitle')


/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> 
</svg>

share|improve this answer

answered Mar 26 at 19:23

Dacre DennyDacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

answered Mar 26 at 19:23

Dacre DennyDacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges

answered Mar 26 at 19:23

Dacre DennyDacre Denny

17.4k44 gold badges1414 silver badges3333 bronze badges