Как создать эллипс в SVG

Question

Я пытаюсь добавить эллипс в SVG

(оригинальный фрагмент)

    <svg>
      <rect x="0" y="0" width="100" height="100"></rect>
      <circle cx="200" cy="0" r="100"></circle>
      <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
    </svg>

Но добавление некоторых атрибутов работает:

(рабочий фрагмент)

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
      <rect x="0" y="0" width="100" height="100"></rect>
      <circle cx="200" cy="0" r="100"></circle>
      <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
    </svg>

Вопросы:

1. Каковы атрибуты xmlns и version для?
2. Почему эллипс НЕ отображается в исходном фрагменте (но прямоугольник и круг отображаются правильно)?

См. здесь для jsfiddle.

Answer 1

Что мешает отображению эллипса, так это отсутствие атрибута width, как показано в этом фрагменте:

<svg width="350">
  <rect x="0" y="0" width="100" height="100"></rect>
  <circle cx="200" cy="0" r="100"></circle>
  <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
</svg>

Размер области просмотра по умолчанию равен 300x150, поэтому все остальное обрезается.

Answer 2

Если вы не укажете размер холста, для элемента <svg> (как и для всех замененных элементов) по умолчанию устанавливается значение 300px x 150px .Ваш эллипс имеет значение rx = "400", поэтому он находится за пределами холста.Установка большего размера холста исправляет проблему, так что вы можете видеть эллипс.

версия не имеет смысла, xmlns требуется только для автономных файлов SVG , если вы встраиваете вещи в html-страницу какмы делаем здесь с фрагментами, вы можете опустить оба.

svg {
  width: 100%;
  height: 100%;
}

<svg>
    <rect x="0" y="0" width="100" height="100"></rect>
    <circle cx="200" cy="0" r="100"></circle>
    <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
</svg>