Css цифра в круге: css circle — цифры в круге на css3

Leave a Comment / Css / By /

html — Увеличение кругов на CSS3

При применении команды scale(n) в SVG происходит всё тоже самое, как и в CSS — чем больше увеличение, тем больше объект сдвигается от начального положения.

<circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" />

Как известно начало координат у svg находится в левом, верхнем углу.
При cx=»40″ cy=»40″ центр окружности будет расположен правее на 40px и ниже на 40px от левого угла (0,0) вьюпорта svg. При применении scale(2) эти цифры умножаются на два. Только из-за этого круг сместится правее и ниже.
Новые координаты центра окружности будут cx=»80″ и cy=»80″.
Для наглядности смотрите анимацию процесса.
Здесь к розовому кругу последовательно применяется увеличение в 1-2-4 раза и обратно 4-2-1

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.
 
 1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	 	 
          <text x="70" y="15">mouseover on pink circle</text>
		<circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
		<circle cx="40px" cy="40px" r="20px" transform="scale(4)" fill="dodgerblue" stroke="none" opacity="0.9" />
		<text x="132" y="162">Scale(4)</text>
		<text x="52" y="82">Scale(2)</text>
		<circle cx="40px" cy="40px" r="20px" fill="violet" stroke="none" opacity="0.5">
		<animateTransform fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="circle1.mouseover" values="1;2;4" restart="whenNotActive"/>
		<animateTransform fill="freeze" attributeName="transform" begin="an1.end" type="scale" dur="1s"  begin="circle1.
  mouseover"           values="4;4" restart="whenNotActive"/> 
		<animateTransform fill="freeze" attributeName="transform" begin="an2.end" type="scale" dur="2s"    begin="circle1.mouseover"           values="4;2;1" restart="whenNotActive"/>
		
		</circle>

	</svg>
 
 </body>

Вариант 1:

Как с этим бороться,- есть несколько вариантов:
Допустим необходимо увеличить объект максимум в 4 раза.
Считаем координаты центра: 40*4= 160px; И сразу располагаем центр окружности с этими координатами: cx=»160″ cx=»160″ Теперь у нас есть уверенность, что круг не выйдет при увеличении за пределы канвы SVG. см. пример ниже.

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.
 
 w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	   <text x="70" y="15">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="81px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />				
		
		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate attributeName="r" fill="freeze"  begin="c1.mouseover"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		 <circle cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

Следующий пример немного посложнее, с двумя кругами, попутно можно посмотреть, как взаимодействуют между собой две анимации.

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1. 1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >

	  <text x="70" y="15">mouseover on greenyellow circle</text>
	  
		<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="80px" fill="none" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />		

		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate attributeName="r"  fill="freeze"  begin="c1.mouseover;an2.end+0.2s"  dur="4s"   values="20;80;20" restart="whenNotActive"/> 
		</circle>

		<circle cx="160px" cy="160px" r="20px"  fill="crimson" stroke="none" opacity="0.9" > 
		<animate attributeName="r"  fill="remove"  begin="an1.end"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		
		<circle cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.
 
 9" /> 
		
	</svg>
 
 </body>

Вариант 2 Если вам нужно разместить окружность в углу канвы, но вы не хотите, чтобы она при увеличении уходила за границы канвы или убегала к центру по диагонали, делайте координаты центра окружности равными радиусу окружности.

<circle cx="20px" cy="20px" r="20px" />        

<head>
  <meta charset="utf-8">
  <title>An expanding circle in the corner</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	   <text x="20" y="185">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="80px" cy="80px" r="82px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0. 9" />		
		
		<circle cx="20px" cy="20px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animateTransform fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="c1.mouseover" values="1;2;4" restart="whenNotActive"/>
		</circle>
		 <circle cx="20px" cy="20px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

Есть еще несколько способов для удержания, центрирования объекта при масштабировании. В ответах других участников уже всё хорошо объяснено. Спасибо за это всем участвующим.

① — Цифра один в круге: U+2460

U+2460

Нажмите, чтобы скопировать и вставить символ

Техническая информация

Название в ЮникодеCircled Digit One
Номер в Юникоде

U+2460

HTML-код

&#9312;

CSS-код

\2460

РазделОбрамлённые буквы и цифры
Версия Юникода:1. 1 (1993)

Значение символа

Цифра один в круге. Обрамлённые буквы и цифры.

Символ «Цифра один в круге» был утвержден как часть Юникода версии 1.1 в 1993 г.

Свойства

Версия1.1
БлокОбрамлённые буквы и цифры
Тип парной зеркальной скобки (bidi)Нет
Композиционное исключениеНет
Изменение регистра2460
Простое изменение регистра2460

Похожие символы

  • ⓵

    Цифра один в двойном круге

  • ❶

    Номер 1, заключённый в чёрный круг

  • ➊

    Номер 1 без засечек, заключённый в. ..

  • ➀

    Номер 1 без засечек, заключённый в круг

  • ➁

    Номер 2 без засечек, заключённый в круг

  • ⑧

    Цифра восемь в круге

  • ⑨

    Цифра девять в круге

  • ᪑

    Тай Тхам tham цифра один

  • ꤁

    Кайях Ли цифра один

  • ১

    Бенгальская цифра один

  • ➄

    Номер 5 без засечек, заключённый в круг

  • ➂

    Номер 3 без засечек, заключённый в круг

  • ➃

    Номер 4 без засечек, заключённый в круг

  • ⑥

    Цифра шесть в круге

  • ➅

    Номер 6 без засечек, заключённый в круг

Кодировка

Кодировкаhexdec (bytes)decbinary
UTF-8E2 91 A0226 145 1601484841611100010 10010001 10100000
UTF-16BE24 6036 96931200100100 01100000
UTF-16LE60 2496 362461201100000 00100100
UTF-32BE00 00 24 600 0 36 96931200000000 00000000 00100100 01100000
UTF-32LE60 24 00 0096 36 0 0161297203201100000 00100100 00000000 00000000

Как добавить кружок вокруг числа в CSS

Добавить круг вокруг числа можно легко сделать с помощью CSS. Это можно сделать с помощью свойства border-radius.

В этом фрагменте вы также можете найти способ добавления кружка вокруг чисел, содержащих от одной до четырех цифр.

Теперь мы покажем процесс шаг за шагом.

  • Создайте
    с именем класса «circle» внутри.
  • Поместите число внутри этого
    .
 

  <голова>
    Название документа
  
  <тело>
    <дел>1

Попробуй сам »

  • Установите радиус границы на «50%».
  • Укажите ширину и высоту элемента.
  • Стиль класса с использованием свойств фона, границы и цвета.
  • Центрировать число, используя значение «center» свойства text-align.
  • Укажите шрифт номера.
 .круг {
  радиус границы: 50%;
  ширина: 34 пикселя;
  высота: 34 пикселя;
  отступ: 10 пикселей;
  фон: #fff;
  граница: 3px сплошная #000;
  цвет: #000;
  выравнивание текста: по центру;
  шрифт: 32px Arial, без засечек;
}

Теперь мы можем увидеть полный пример.

Пример добавления кружка вокруг числа: 

 

  <голова>
    Название документа
    <стиль>
      .круг {
        радиус границы: 50%;
        ширина: 34 пикселя;
        высота: 34 пикселя;
        отступ: 10 пикселей;
        фон: #fff;
        граница: 3px сплошная #000;
        цвет: #000;
        выравнивание текста: по центру;
        шрифт: 32px Arial, без засечек;
      }
    
  
  <тело>
    <дел>1

Попробуй сам »

Результат

Далее мы собираемся показать пример, где мы используем кружки вокруг чисел от одной до четырех цифр. Этот пример можно использовать для любого количества текста и круга любого размера.

Здесь мы будем использовать свойство line-height. Обратите внимание, что свойства width и line-height должны иметь одинаковое значение.

Пример добавления кружка вокруг чисел от одной до четырех цифр: 

 

  <голова>
    Название документа
    <стиль>
      . круг {
        ширина: 120 пикселей;
        высота строки: 120 пикселей;
        радиус границы: 50%;
        выравнивание текста: по центру;
        размер шрифта: 32px;
        граница: 3px сплошная #000;
      }
    
  
  <тело>
    <дел>1
    <дел>100
    <дел>10000
    
1000000

Попробуй сам »

В нашем последнем примере мы используем префиксы -moz- и -webkit- со свойством border-radius. Здесь мы также используем свойство отображения, для которого задано значение «inline-block», чтобы представить элемент как блочный контейнер встроенного уровня.

Пример добавления окружности вокруг числа с использованием свойства line-height: 

 

  <голова>
    Название документа
    <стиль>
      диапазон.круг {
        фон: #e3e3e3;
        радиус границы: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        цвет: #6e6e6e;
        отображение: встроенный блок;
        вес шрифта: полужирный;
        высота строки: 40px;
        поле справа: 5px;
        выравнивание текста: по центру;
        ширина: 40 пикселей;
      }
    
  
  <тело>
    1

Попробуй сам »

Как создать круг вокруг числа с помощью CSS

Это просто. Я покажу вам, как создать круг вокруг числа или текста на вашей веб-странице с помощью CSS.

Предположим, вы используете элемент &ltspan> (попробуйте также использовать элемент &ltdiv>), где вы определили число, подобное этому.

&ltspan>12&lt/span>

Теперь давайте добавим круг вокруг него с помощью CSS.

<span> 12
</span>

Попробуйте

Я определил стиль в строке. Вы можете определить его в файле .css или в теге &ltstyle> , как здесь.

<body>

  <style>
    .круг {
        ширина: 25 пикселей;
        высота: 25 пикселей;
        высота строки: 25 пикселей;
        -moz-border-radius: 50%;
        радиус границы: 50%;
        граница: сплошная 1px #1464F4;
        цвет: #1464F4;
        выравнивание текста: по центру;
        отображение: блок;'
    }
  </стиль>

  <span>
    12
  </диапазон>
</тело>

Я объясню стиль. Сначала я определил свойства ширины, высоты и высоты строки для элемента (элемент &ltspan>). Вы можете настроить значения в соответствии с вашими требованиями.

Высота и ширина строки важны, так как определяют размер элемента.

Затем я определил свойство border-radius по адресу 50% , за которым следует граница свойства.

-moz-border-radius: 50%;
радиус границы: 50%;
граница: сплошная 1px #1464F4;

Свойство text-align будет центрировать число внутри круга. В этом случае необходимо свойство diplay , так как я использую элемент &ltspan>.
Вы можете игнорировать свойство отображения, если используете элемент &ltdiv>.

Помните : если число (или длина текста) увеличивается, то же самое происходит с шириной, высотой и высотой строки. Например,

<style>
    .круг {
        ширина: 120 пикселей;
        высота: 120 пикселей;
        высота строки: 120 пикселей;
        -moz-border-radius: 50%;
        радиус границы: 50%;
        граница: сплошная 3 пикселя #1464F4;
        цвет фона: #ffffff;
        цвет: #1464F4;
        выравнивание текста: по центру;
        дисплей: блок;
    }
</стиль>
  
<span> 1200 </span>

Попробуйте

Во многих случаях шрифт числа (или текста) играет очень важную роль.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *