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

Я пытаюсь добавить эллипс в 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>

Вопросов:

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

Смотрите здесь для jsfiddle.

html svg

08.06.2018 19:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

202

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если вы не указываете размер холста, для элемента <svg> (как и для всех заменяемых элементов) по умолчанию используется значение 300 пикселей x 150 пикселей. Ваш эллипс находится в 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>

Отличный ответ во всех смыслах.

— 08.06.2018 19:20

08.06.2018 19:16

Что мешает отображению эллипса, так это отсутствие атрибута 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, поэтому все остальное обрезается.

08.06.2018 19:16