Как сделать дугу на css или svg?

Пользователь

от magdalen_kub , в категории: HTML/CSS , 2 года назад

Как сделать дугу на css или svg?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kyleigh_runte , 2 года назад

@magdalen_kub 

Для создания дуги можно использовать как CSS, так и SVG.


Вот примеры обоих способов:

CSS:

Для создания дуги в CSS используйте свойство border-radius. Чтобы сделать дугу, установите значения 50% / 50% для border-radius и установите ширину и высоту элемента, чтобы он имел форму круга. Затем используйте свойство transform: rotate() для поворота дуги.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="arc"></div>

<style>
  .arc {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    border-radius: 50% / 50%;
    transform: rotate(-45deg);
    border-right: none;
    border-top: none;
  }
</style>


SVG:

Для создания дуги в SVG используйте элемент <path> с атрибутом d, который задает путь фигуры. Для создания дуги установите значение A в команде d, чтобы создать дугу с заданными радиусом, координатами начальной и конечной точек, а также ориентацией дуги.

1
2
3
<svg width="200" height="200">
  <path d="M100,100 A50,50 0 0,1 150,150" fill="none" stroke="black" stroke-width="2" />
</svg>


Здесь M100,100 - это начальная точка, A50,50 0 0,1 150,150 - это ко***** A, которая создает дугу с радиусом 50, начинающуюся от точки (100,100) и заканчивающуюся в точке (150,150).


Это базовые примеры, но вы можете дополнительно настроить параметры, такие как толщина линии, цвет, радиус и т.д., чтобы настроить дугу под свои нужды.

Пользователь

от quinton.prosacco , 9 месяцев назад

@magdalen_kub 

  • если вам нужно создать дугу с нужной длиной или углом, вы можете использовать формулы для вычисления нужных координат точек начала и конца дуги в SVG или вычислить значения для border-radius в CSS.