Круг SVG
Описание элемента <circle>
Элемент SVG <circle> создает круги на основе центральной точки и радиуса. Координаты центра круга задаются атрибутами cx и cy. А радиус круга указывается атрибутом r.
Пример элемента SVG <circle>:
Пример элемента SVG <circle>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Давайте разберем приведенный выше код:
- Атрибуты cx и cy задают координаты x и y центра круга. Если атрибуты cx и cy опущены, центр круга устанавливается в (0,0).
- Атрибут r используется для указания радиуса круга.
Продвинутые техники работы с кругами SVG
Хотя базовые круги SVG отлично подходят для простых задач, существует множество продвинутых техник, которые помогут выделить ваши SVG-круги. Вот несколько примеров:
Градиенты
Круги SVG могут использовать градиенты для создания плавного перехода между цветами. Вот пример:
Круги SVG могут использовать градиенты для создания плавного перехода между цветами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>
</body>
</html>В этом примере мы создали градиент, переходящий от желтого к красному. Затем мы используем атрибут fill для применения градиента к нашему кругу.
Тени
Круги SVG также могут иметь тени для создания глубины и объема. Вот пример:
Круги SVG также могут иметь тени для создания глубины и объема.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" />
</filter>
</svg>
</body>
</html>В этом примере мы создали синий круг с тенью. Мы используем атрибут filter для применения эффекта тени, который определен в элементе filter.
Анимации
Наконец, круги SVG можно анимировать, чтобы создать интерактивный опыт для ваших пользователей. Вот пример:
Круги SVG также можно анимировать для создания интерактивных эффектов
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle id="myCircle" cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
</circle>
</svg>
</body>
</html>В этом примере мы создали зеленый круг, который перемещается при клике. Мы используем элемент animate для определения анимации и привязываем его к элементу круга с помощью атрибута attributeName.
Атрибуты
Элемент SVG <circle> также поддерживает Глобальные атрибуты и Атрибуты событий.
| Attribute | Description |
|---|---|
| cx | Координата x центра круга. |
| cy | Координата y центра круга. |
| r | Радиус круга. Значение меньше или равное нулю отключит отображение круга. |
| pathlength | Этот атрибут указывает общую длину пути в пользовательских единицах. |
Практика
Какие из следующих атрибутов необходимы для создания элемента круга SVG в HTML?