<svg>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Элемент svg
является контейнером, который определяет новую систему координат и область просмотра. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.
Примечание: Атрибут xmlns
требуется только для самого внешнего элемента svg
документов SVG. Это не нужно для внутренних элементов svg
или внутри документов HTML.
Пример
<svg
viewBox="0 0 300 100"
xmlns="http://www.w3.org/2000/svg"
stroke="red"
fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
Атрибуты
baseProfile
Устарело-
The minimum SVG language profile that the document requires. Value type: <string> ; Default value: none; Animatable: no
contentScriptType
Устарело-
Язык сценариев по умолчанию, используемый фрагментом SVG. Value type: <string> ; Default value:
application/ecmascript
; Animatable: no contentStyleType
Устарело-
Язык таблицы стилей по умолчанию, используемый фрагментом SVG. Value type: <string> ; Default value:
text/css
; Animatable: no height
-
Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.) Value type: <length>|<percentage> ; Default value:
auto
; Animatable: yes preserveAspectRatio
-
How the
svg
fragment must be deformed if it is displayed with a different aspect ratio. Value type: (none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ; Default value:xMidYMid meet
; Animatable: yes version
Устарело-
Какая версия SVG используется для внутреннего содержимого элемента. Value type: <number> ; Default value: none; Animatable: no
viewBox
-
Координаты области просмотра SVG для текущего фрагмента SVG. Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
-
Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.) Value type: <length>|<percentage> ; Default value:
auto
; Animatable: yes x
-
The displayed x coordinate of the svg container. No effect on outermost
svg
elements. Value type: <length>|<percentage> ; Default value:0
; Animatable: yes y
-
The displayed y coordinate of the svg container. No effect on outermost
svg
elements. Value type: <length>|<percentage> ; Default value:0
; Animatable: yes
Примечание: Примечание. Начиная с SVG2, x
, y
, width
и height
являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.
Примечания по использованию
Категории | Элемент-контейнер, Структурный элемент |
---|---|
Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания Элементы фигуры Структурные элементы Элементы градиента <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Спецификации
Specification |
---|
Scalable Vector Graphics (SVG) 2 # NewDocument |
Совместимость с браузерами
BCD tables only load in the browser