This page is being translated; the original is shown (Русский ).
Цвет обводки
Классы stroke-* задают stroke — цвет обводки фигур SVG — по ролям границ
темы. Берите их для линейных значков, схем и графиков.
Пример
Роли
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-2 sm:grid-col-4 lg:grid-col-6 gap-3" >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-outline" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-outline</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-outline-variant" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-outline-variant</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-primary</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-secondary" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-secondary</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-tertiary" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-tertiary</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-error" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-error</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-warning" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-warning</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-success" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-success</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-current" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-current</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-transparent stroke-2 stroke-transparent" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-transparent</code >
</div >
</div >
При наведении
Наведите указатель на круг: обводка принимает цвет primary.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-1 items-start" >
<svg class ="svg-10 fill-transparent stroke-2 transition stroke-outline-variant hover:stroke-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><circle cx ="12" cy ="12" r ="9" /></svg >
<code class ="text-1/2 color-on-surface-variant" >stroke-outline-variant hover:stroke-primary</code >
</div >
Классы
Класс
CSS
Значения
stroke-transparentstroke: var(--sf-transparent)—
stroke-currentstroke: var(--sf-current)—
strokestroke: var(--sf-outline-variant)—
stroke-outlinestroke: var(--sf-outline)—
stroke-outline-variantstroke: var(--sf-outline-variant)—
stroke-primarystroke: var(--sf-outline-primary)—
stroke-secondarystroke: var(--sf-outline-secondary)—
stroke-tertiarystroke: var(--sf-outline-tertiary)—
stroke-errorstroke: var(--sf-outline-error)—
stroke-warningstroke: var(--sf-outline-warning)—
stroke-successstroke: var(--sf-outline-success)—
Условия (что это ): ширина экрана — нет; состояния — hover:. Например: hover:stroke-transparent.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены .
Переменная
Значение по умолчанию
--sf-transparentrgba(255,255,255,0)
--sf-currentcurrentColor
--sf-outline-variantlight-dark(var(--sf-neutral-50--alfa-24), var(--sf-neutral-90--alfa-24))
--sf-outlinelight-dark(var(--sf-neutral-50--alfa-80), var(--sf-neutral-60--alfa-64))
--sf-outline-primarylight-dark(var(--sf-primary-50), var(--sf-primary-60))
--sf-outline-secondarylight-dark(var(--sf-secondary-50), var(--sf-secondary-60))
--sf-outline-tertiarylight-dark(var(--sf-tertiary-50), var(--sf-tertiary-60))
--sf-outline-errorlight-dark(var(--sf-error-50), var(--sf-error-60))
--sf-outline-warninglight-dark(var(--sf-warning-50), var(--sf-warning-60))
--sf-outline-successlight-dark(var(--sf-success-50), var(--sf-success-60))
Применение
Как выбрать роль
Класс
Роль
stroke, stroke-outline-variantспокойная граница: --sf-outline-variant
stroke-outlineзаметная граница: --sf-outline
stroke-primary, stroke-secondary, stroke-tertiaryграница акцентной роли: --sf-outline-primary …
stroke-error, stroke-warning, stroke-successграница статусной роли
stroke-currentцвет текста
stroke-transparentбез видимой обводки
Цвета обводки — это роли границ (--sf-outline-*), а не цвета заливки:
stroke-primary совпадает с границей акцентного поля, а не с заливкой
fill-primary.
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 >
Ограничения
Префиксов ширины экрана у семейства нет.
См. также
Предыдущая Размер SVG-изображений Следующая Концы обводки
