Как добавить контур / границу к элементу эллипса в SVG?

Question

Я новичок в SVG. Мне было интересно, какой атрибут я мог бы использовать, чтобы добавить контур / границу к элементу эллипса в коде SVG? На самом деле, я пытаюсь создать интерактивный график, используя SVG и jQuery, поэтому мне нужно, чтобы определенные выбранные элементы эллипса отображали сплошную схему определенного цвета (например, темно-красного), когда происходит событие. Я хотел бы знать, как это можно сделать.

Спасибо!

Answer 1

Вы имеете в виду что-то подобное?

<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> 

Где эллипс имеет фиолетовый край. Или вы имеете в виду квадратную рамку вокруг эллипса, которую вам нужно сделать отдельно, как это?

<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> 

Answer 2

В CSS что-то вроде:

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