Как нарисовать знак "х" с помощью svg и css?

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

от mona_terry , в категории: HTML/CSS , 7 месяцев назад

Как нарисовать знак "х" с помощью svg и css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от christine , 6 месяцев назад

@mona_terry 

Вы можете нарисовать знак "х" с помощью SVG и CSS, используя элемент <path> для контура.


Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<style>
.x-sign {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.x-sign path {
  fill: none;
  stroke: black;
  stroke-width: 2px;
}
</style>
</head>
<body>

<svg class="x-sign" viewBox="0 0 100 100">
  <path d="M10,10 L90,90 M10,90 L90,10"></path>
</svg>

</body>
</html>


В этом примере создается SVG элемент с классом x-sign, который имеет ширину и высоту 100 пикселей. Элемент <path> определяет две линии, которые образуют знак "х". Свойство d пути определяет сначала линию от точки (10,10) до (90,90), а затем линию от (10,90) до (90,10). Свойства fill, stroke и stroke-width CSS применяются к элементу <path>, чтобы задать цвет и толщину линий.


Весь элемент SVG стилизован через CSS с классом x-sign, чтобы указать размер и положение (100x100 пикселей и display: inline-block).


При открытии этого кода в браузере вы увидите знак "х".