Рисование эллипса с помощью SVG <ellipse>

Элемент SVG <ellipse> используется для рисования эллипсов. Эллипс — это круг, у которого ширина и высота не равны. Иначе говоря, его радиус в осях x и y различен.

Пример SVG эллипса

Это пример кода для рисования эллипса:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse　cx="40"　cy="40"　rx="30"　ry="15"
　　　　　　　　　　　style="stroke:#006600;　fill:#00cc00"/>
</svg>

Результат после выполнения будет следующим:

cx и cy эллипса, как и у круга, центрированы. Но радиус по осям x и y указывается двумя свойствами (а не одним), а именно свойствами rx и ry. Как вы видите, у свойства rx значение выше, чем у свойства ry, что делает эллипс шире, чем высота. Установка свойств rx и ry с одинаковыми значениями создаст круг.

Установка ширины рамки stroke-width

Вы можете использовать атрибут style stroke-width для установки ширины рамки эллипса. Пример:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke:　#ff0000;stroke-width:　5;fill:　none;"/>
</svg>

Результат изображения после выполнения будет следующим:

Эллипс с пунктирной рамкой

Вы также можете использовать атрибут style stroke-dasharray, чтобы сделать контур эллипса пунктирным.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke:　#ff0000;stroke-width:　5;
　　　　　　　　　stroke-dasharray:　10　5;fill:　none;"/>
</svg>

В этом примере ширина штриховки установлена в 10, а интервал между штриховками (Интервал между штриховками) установлен в 5. Вот как будет выглядеть эллипс при рендеринге:

Прозрачная рамка

Вы можете использовать атрибут style stroke-opacity, чтобы сделать рамку эллипса SVG полупрозрачной.

<svg height="120">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　　　　　fill: none;
　　　　<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke:　#0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　　　　　stroke-opacity:　0.5;
　　　　　　　　　　　　　　　　　　　fill: none;
</svg>

Визуальный результат эллипса SVG после выполнения будет следующим:

Обратите внимание, что второй (синий) эллипс прозрачен, и как через его контур виден красный эллипс.

Заливка эллипса

Эллипс можно заливать с помощью стиля fill:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　fill:　#ff6666;"/>
</svg>

Визуальный результат эллипса SVG после выполнения будет следующим:

Заливка с неопределенностью

Стиль属性 fill-opacity можно использовать для установки неопределенности (прозрачности) заливки эллипса:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　fill: none;
<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　style="stroke: none;
　　　　　　　　　　　　　　　fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.5;
</svg>

Внешний вид эллипса при рендеринге выглядит следующим образом:

Обратите внимание, что второй (голубой) эллипс полупрозрачный, что делает красный эллипс видимым.