Рисование круга с помощью SVG <circle>

<circle> Элемент SVG - это базовая форма SVG, используемая для создания окружностей, основанных на центре и半径е, и позволяет использовать свойства stroke и fill для создания сплошных, штриховых контуров и заливки цветов окружностей.

Элемент SVG <circle> используется для рисования окружностей. Вот простой пример:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="40" cy="40" r="24" style="stroke: #006600; fill: #00cc00"/>
</svg>

Вот изображение результата выполнения

Этот круг с центром в точках cx, cy и半径ом r. cx, cy и r являются атрибутами элемента <circle>.

圆形描边

Вы можете использовать стиль stroke SVG для установки контура SVG окружности. В первом примере на этой странице штриховая линия установлена в темно-зеленый цвет #006600. Однако, вы можете не только установить цвет контура, но и многое другое. Вы также можете использовать стиль свойства stroke-width для установки ширины контура. Вот пример:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #006600;
　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　fill:#00cc00" /></svg>

Вот как выглядит круг после выполнения:

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

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #006600;
　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　stroke-dasharray: 10 5;
　　　　　　　　　　　fill:#00cc00" /></svg>

Вот как выглядит результат после рендеринга:

Вы также можете удалить рамку (контур) круга и заполнить его только цветом заливки. Пример кода如下:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: none;
　　　　　　　　　　　fill:#00cc00" /></svg>

Вот как выглядит круг без рамки после выполнения:

Circle Fill

Стиль заливки fill стиля свойства контролирует способ заливки окружности. Установив значение fill свойства в none, можно выбрать полное отсутствие заливки.
Пример приведен ниже:

Вот как выглядит круг без заливки:

Вы можете использовать атрибут fill для установки цвета заливки, как было описано ранее в этом документе, пример кода如下:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #660066;
　　　　　　　　　　　fill: #00ff00" /></svg>

Внешний вид круга и его заливки颜色的 пример приведен ниже:

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

<svg height="80px">
　　　　<circle cx="40" cy="40" r="24" style="stroke: #660000;
　　　　　　　　　　　　　　　　　　　fill: #cc0000;
　　　　　　　　　　　　</circle>
　　　　<circle cx="64" cy="40" r="24" style="stroke: #000099;
　　　　　　　　　　　　　　　　　　　fill: #0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity: 0.5;
　　　　　　　　　　　　</circle>
</svg>

Результат выполнения будет выглядеть так:

Обратите внимание, что синий (справа) кружок теперь внутри полупрозрачный. Чтобы сделать контур также полупрозрачным, необходимо использовать стиль свойства stroke-opacity.