This page is being translated; the original is shown (Русский ).
Толщина обводки
Классы stroke-0 … stroke-10 задают stroke-width — толщину обводки фигур
SVG. Берите их для линейных значков, схем и графиков.
Пример
Шкала
Номер ступени — толщина в пикселях при 1rem = 16px. В примере один пиксель рисунка равен пикселю экрана.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-3 sm:grid-col-6 gap-3" >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-0" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-0</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-1" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-1</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-2" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-2</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-3" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-3</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-4" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-4</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-5" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-5</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-6" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-6</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-7" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-7</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-8" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-8</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-9" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-9</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-10" viewBox ="0 0 40 40" aria-hidden ="true" ><path d ="M6 20h28" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-10</code >
</div >
</div >
Ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: обводка толще с ширины md и ещё толще с ширины xl.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-1 items-start" >
<svg class ="w-d0 h-d0 fill-transparent stroke-primary stroke-1 md:stroke-4 xl:stroke-8" viewBox ="0 0 40 40" aria-hidden ="true" ><circle cx ="20" cy ="20" r ="14" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-1 md:stroke-4 xl:stroke-8</code >
</div >
Классы
Класс
CSS
Значения
stroke-1stroke-width: var(--sf-a1)—
stroke-2stroke-width: var(--sf-a2)—
stroke-3stroke-width: var(--sf-a3)—
stroke-4stroke-width: var(--sf-a4)—
stroke-5stroke-width: var(--sf-a5)—
stroke-6stroke-width: var(--sf-a6)—
stroke-7stroke-width: var(--sf-a7)—
stroke-8stroke-width: var(--sf-a8)—
stroke-9stroke-width: var(--sf-a9)—
stroke-10stroke-width: var(--sf-b0)—
stroke-0stroke-width: var(--sf-0)—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:stroke-1.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены .
Переменная
Значение по умолчанию
--sf-a10.0625rem
--sf-a20.125rem
--sf-a30.1875rem
--sf-a40.25rem
--sf-a50.3125rem
--sf-a60.375rem
--sf-a70.4375rem
--sf-a80.5rem
--sf-a90.5625rem
--sf-b00.625rem
--sf-00
Применение
Шкала
Класс
Токен
Толщина
stroke-0--sf-00
stroke-1 … stroke-9--sf-a1 … --sf-a91px … 9px
stroke-10--sf-b010px
Масштаб рисунка
Толщина задана в единицах CSS, но рисуется в системе координат SVG: если
viewBox в два раза меньше размера элемента, обводка тоже выглядит в два раза
толще. Значок viewBox="0 0 24 24" размером 48px со stroke-2 рисует линию
толщиной 4px.
HTML wrap_text Wrap source lines content_copy Copy
<svg class ="svg-3 fill-transparent stroke-current stroke-2" viewBox ="0 0 24 24" aria-hidden ="true" >…</svg >
Ограничения
Префиксов состояния у семейства нет.
См. также
Предыдущая Углы обводки Следующая Таблицы
