Элемент
<pattern>
определяет графический объект, который может быть перерисован с повторяющимися координатами x и y («мозаичным»), чтобы покрыть область.На ссылку
<pattern>
ссылаются атрибуты fill
и / или stroke
на других графических элементах , чтобы заполнить или обвести эти элементы указанным шаблоном. <svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
Атрибуты
height
- Этот атрибут определяет высоту плитки шаблона.
Value type: <length>|<percentage>; Default value:0
; Animatable: yes href
- Этот атрибут по умолчанию ссылается на пример шаблона для
<pattern>
Value type: <URL>; Default value: none; Animatable: yes patternContentUnits
- Этот атрибут определяет систему координат содержимого
<pattern>
.
Value type:userSpaceOnUse
|objectBoundingBox
; Default value:userSpaceOnUse
; Animatable: yesСноска: Этот атрибут не действует, если в элементе
<pattern>
указан атрибутviewBox
. patternTransform
- Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.
Value type: <transform-list>; Default value: none; Animatable: yes patternUnits
- Этот атрибут определяет систему координат для атрибутов
x
,y
,width
иheight
.
Value type:userSpaceOnUse
|objectBoundingBox
; Default value:objectBoundingBox
; Animatable: yes preserveAspectRatio
- Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.
Value type: (none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ; Default value:xMidYMid meet
; Animatable: yes viewBox
- Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.
Value type: <list-of-numbers> ; Default value: none; Animatable: yes width
- Этот атрибут определяет ширину плитки шаблона.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes x
- Этот атрибут определяет смещение координаты x мозаичного изображения.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes xlink:href
Устарело SVG 2- Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов
<pattern>
.
Value type: <URL>; Default value: none; Animatable: yesСноска: Для браузеров, реализующих
href
, если заданы какhref
, так иxlink:href
,xlink:href
будет игнорироваться, используя толькоhref
. y
- Этот атрибут определяет смещение координат y мозаичного элемента.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes
Глобальные атрибуты
- Core Attributes
- Most notably:
id
,tabindex
- Styling Attributes
class
,style
- Conditional Processing Attributes
- Most notably:
requiredExtensions
,systemLanguage
- Presentation Attributes
- Most notably:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- XLink Attributes
- Most notably:
xlink:title
Нотации
Категории | Контейнеры |
---|---|
Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания Фигуры Структурные элементы Градиенты <a> , <altGlyphDef> , <clipPath> , <color-profile> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Характеристики
Характеристики | Статус | Коммент |
---|---|---|
Scalable Vector Graphics (SVG) 2 Определение '<pattern>' в этой спецификации. |
Кандидат в рекомендации | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Определение '<pattern>' в этой спецификации. |
Рекомендация | Initial definition |
Совместимость браузера
BCD tables only load in the browser