内容表

• 范例
• 属性
• 用法注意事项
• 规范
• 浏览器兼容性

<svg>

1. <a>
2. <defs>
3. <g>
4. <marker>
5. <mask>
6. <missing-glyph>
7. <pattern>
8. <svg>
9. <switch>
10. <symbol>
11. SVG 元素

    1. A
       1. <a>
       2. <altGlyph>
       3. <altGlyphDef>
       4. <altGlyphItem>
       5. <animate>
       6. <animateColor>
       7. <animateMotion>
       8. <animateTransform>
    2. B-C
       1. <circle>
       2. <clipPath>
       3. <color-profile>
       4. <cursor>
    3. D
       1. <defs>
       2. <desc>
    4. E
       1. <ellipse>
    5. F
       1. <feBlend>
       2. <feColorMatrix>
       3. <feComponentTransfer>
       4. <feComposite>
       5. <feConvolveMatrix>
       6. <feDiffuseLighting>
       7. <feDisplacementMap>
       8. <feDistantLight>
       9. <feFlood>
       10. <feFuncA>
       11. <feFuncB>
       12. <feFuncG>
       13. <feFuncR>
       14. <feGaussianBlur>
       15. <feImage>
       16. <feMerge>
       17. <feMergeNode>
       18. <feMorphology>
       19. <feOffset>
       20. <fePointLight>
       21. <feSpecularLighting>
       22. <feSpotLight>
       23. <feTile>
       24. <feTurbulence>
       25. <filter>
       26. <font>
       27. <font-face>
       28. <font-face-format>
       29. <font-face-name>
       30. <font-face-src>
       31. <font-face-uri>
       32. <foreignObject>
    6. G
       1. <g>
       2. <glyph>
       3. <glyphRef>
    7. H
       1. <hkern>
    8. I
       1. <image>
    9. J-L
       1. <line>
       2. <linearGradient>
    10. M
        1. <marker>
        2. <mask>
        3. <metadata>
        4. <missing-glyph>
        5. <mpath>
    11. N-P
        1. <path>
        2. <pattern>
        3. <polygon>
        4. <polyline>
    12. Q-R
        1. <radialGradient>
        2. <rect>
    13. S
        1. <script>
        2. <set>
        3. <stop>
        4. <style>
        5. <svg>
        6. <switch>
        7. <symbol>
    14. T
        1. <text>
        2. <textPath>
        3. <title>
        4. <tref>
        5. <tspan>
    15. U
        1. <use>
    16. V-Z
        1. <view>
        2. <vkern>

svg element is a container that defines a new coordinate system and viewport . It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.

注意： xmlns attribute is only required on the outermost svg 元素的 SVG documents . It is unnecessary for inner svg elements or inside HTML documents.

范例

html,body,svg { height:100% }

					

<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> ; 默认值 : none; Animatable : no

contentScriptType

The default scripting language used by the SVG fragment. Value type : <string> ; 默认值 : application/ecmascript ; Animatable : no

contentStyleType

The default style sheet language used by the SVG fragment. Value type : <string> ; 默认值 : text/css ; Animatable : no

height

The displayed height of the rectangular viewport. (Not the height of its coordinate system.) Value type : <length> | <percentage> ; 默认值 : auto ; Animatable : yes

preserveAspectRatio

如何 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 )? ; 默认值 : xMidYMid meet ; Animatable : yes

version

Which version of SVG is used for the inner content of the element. Value type : <number> ; 默认值 : none; Animatable : no

viewBox

The SVG viewport coordinates for the current SVG fragment. Value type : <list-of-numbers> ; 默认值 : none; Animatable : yes

width

The displayed width of the rectangular viewport. (Not the width of its coordinate system.) Value type : <length> | <percentage> ; 默认值 : auto ; Animatable : yes

x

The displayed x coordinate of the svg container. No effect on outermost svg 元素。 Value type : <length> | <percentage> ; 默认值 : 0 ; Animatable : yes

y

The displayed y coordinate of the svg container. No effect on outermost svg 元素。 Value type : <length> | <percentage> ; 默认值 : 0 ; Animatable : yes

注意： Starting with SVG2, x , y , width ，和 height are Geometry Properties , meaning these attributes can also be used as CSS properties.

全局属性

Core Attributes

Most notably: id , tabindex

Styling Attributes

class , style

Conditional Processing Attributes

Most notably: requiredExtensions , systemLanguage

Event Attributes

Global event attributes , Graphical event attributes , Document event attributes , Document element event attributes

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

Aria Attributes

aria-activedescendant , aria-atomic , aria-autocomplete , aria-busy , aria-checked , aria-colcount , aria-colindex , aria-colspan , aria-controls , aria-current , aria-describedby , aria-details , aria-disabled , aria-dropeffect , aria-errormessage , aria-expanded , aria-flowto , aria-grabbed , aria-haspopup , aria-hidden , aria-invalid , aria-keyshortcuts , aria-label , aria-labelledby , aria-level , aria-live , aria-modal , aria-multiline , aria-multiselectable , aria-orientation , aria-owns , aria-placeholder , aria-posinset , aria-pressed , aria-readonly , aria-relevant , aria-required , aria-roledescription , aria-rowcount , aria-rowindex , aria-rowspan , aria-selected , aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , role

用法注意事项

类别	Container element, Structural element
准许内容	Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a> , <altGlyphDef> , <clipPath> , <color-profile> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view>

规范

规范
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG) # NewDocument

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者