Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Рисуем svg круг

Поддержи проект!!! smile

Нарисуем SVG круг, попробуем разобраться. как можно нарисовать rhu SVG кодом!?

круг "svg"

  1. Рисуем круг в "svg"
  2. Позиционирование, размерность и другие параметры круга "svg"
  1. Рисуем круг в "svg"

    Пред определенный тег <circle>, который и будет нашим кругом в "svg"
    Обычно, когда рассказывают об "svg", то начинают с круга! Ну, что ж давайте и мы нарисуем круг с помощью "svg"
    Нам нужны три атрибута:

    Радиус круга — r.

    Позицию центра круга по оси x — cx.

    Позицию центра круга по оси y — cy.

    Далее добавим:

    stroke - наружная обводку.

    stroke-width - ширина наружной обводки.

    И цвет заливки fill.

    Код круга "svg"

    <svg width="100" height="100">

    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />

    </svg>

    Вывод нарисованного круга через "svg"

  2. Позиционирование, размерность и другие параметры круга "svg" Для примера позиционирования картинки внутри "svg" возьмем одноцветный круг.

    С позицией по центру и радиусом равным этому центру 50:

    <svg width="100" height="100"><circle cx="50" cy="50" r="50" fill="green" /> </svg>

    Результат:

    Если откроем исследовать элемент, то увидим, что внешняя размерность задается размерами внутри

    <svg width="100" height="100">
    Рисуем круг в  ‘svg‘

    И далее изменим, позицию центра на 10px по двум осям:

    cx="50" cy="50" на cx="40" cy="40"

    Видим, что наш круг поднялся вверх на 10px и влево сдвинулся также на 10px

    Рисуем круг в  ‘svg‘ Это простой пример позиционирования картинки внутри "svg"


Вас может еще заинтересовать список тем : #SVG |
Последняя дата редактирования : 08.01.2021 17:00
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.