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

Question

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!

border ≈ stroke (see http://www.w3.org/TR/SVG11/painting.html#StrokeProperties) — Erik Dahlström, Oct 05 '12 at 08:16

score 5 · Accepted Answer · answered Oct 05 '12 at 06:48

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>

I meant the first one. Thanks! – assassin Oct 05 '12 at 20:34 — assassin, Oct 05 '12 at 20:34

score 0 · Answer 2 · answered Aug 20 '13 at 08:21

0

In CSS, something like:

path {
  fill: none;;
  stroke: #646464;
  stroke-width:1px
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

answered Aug 20 '13 at 08:21

Hugolpz

17,296
26
100
187

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

2 Answers2