Search code examples
javascriptjquerysvgvector-graphicsjquery-svg

How can I add an outline/border to an ellipse element in SVG?

I am a newbie to SVG. I was wondering what attribute I could use to add an outline/border to an ellipse element in SVG code? Actually, I am trying to make an interactive graph using SVG and jQuery, so I need to have certain selected ellipse elements display a solid outline of a specific color (like dark red) when an event happens. I'd like to know how this can be done.

Thanks!

Solution

  • Do you mean something like this?

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100%" height="100%">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  fill="yellow" stroke="purple" stroke-width="2"/>
</svg>

    Where the ellipse has a purple edge. Or do you mean a square box round the ellipse which you'd need to do separately like this?

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100%" height="100%">
  <ellipse cx="300" cy="80" rx="100" ry="50" fill="yellow"/>
  <rect x="200" y="30" width="200" height="100"
   fill="none" stroke="purple" stroke-width="2"/>
</svg>