- SVG: Scalable Vector Graphics - MDN - Mozilla

Trang chủ » Svg G X Y » - SVG: Scalable Vector Graphics - MDN - Mozilla

Có thể bạn quan tâm

  1. References
  2. SVG
  3. Elements
  4. <g>
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • Español
    • Français
    • 日本語
    • Português (do Brasil)
    • Русский
    • 中文 (简体)
  • Example
  • Usage context
  • Specifications
  • Browser compatibility
  1. SVG
  2. Tutorials
  3. Introducing SVG from scratch
    1. Introduction
    2. Getting started
    3. Positions
    4. Basic shapes
    5. Paths
    6. Fills and Strokes
    7. Gradients in SVG
    8. Patterns
    9. Texts
    10. Basic transformations
    11. Clipping and masking
    12. Other content in SVG
    13. Filter effects
    14. SVG fonts
    15. SVG image element
    16. Tools for SVG
    17. SVG and CSS
  4. Reference
  5. Elements
    1. <a>
    2. <animate>
    3. <animateMotion>
    4. <animateTransform>
    5. <circle>
    6. <clipPath>
    7. <cursor> Deprecated
    8. <defs>
    9. <desc>
    10. <ellipse>
    11. <feBlend>
    12. <feColorMatrix>
    13. <feComponentTransfer>
    14. <feComposite>
    15. <feConvolveMatrix>
    16. <feDiffuseLighting>
    17. <feDisplacementMap>
    18. <feDistantLight>
    19. <feDropShadow>
    20. <feFlood>
    21. <feFuncA>
    22. <feFuncB>
    23. <feFuncG>
    24. <feFuncR>
    25. <feGaussianBlur>
    26. <feImage>
    27. <feMerge>
    28. <feMergeNode>
    29. <feMorphology>
    30. <feOffset>
    31. <fePointLight>
    32. <feSpecularLighting>
    33. <feSpotLight>
    34. <feTile>
    35. <feTurbulence>
    36. <filter>
    37. <font-face-format> Deprecated
    38. <font-face-name> Deprecated
    39. <font-face-src> Deprecated
    40. <font-face-uri> Deprecated
    41. <font-face> Deprecated
    42. <font> Deprecated
    43. <foreignObject>
    44. <g>
    45. <glyph> Deprecated
    46. <glyphRef> Deprecated
    47. <hkern> Deprecated
    48. <image>
    49. <line>
    50. <linearGradient>
    51. <marker>
    52. <mask>
    53. <metadata>
    54. <missing-glyph> Deprecated
    55. <mpath>
    56. <path>
    57. <pattern>
    58. <polygon>
    59. <polyline>
    60. <radialGradient>
    61. <rect>
    62. <script>
    63. <set>
    64. <stop>
    65. <style>
    66. <svg>
    67. <switch>
    68. <symbol>
    69. <text>
    70. <textPath>
    71. <title>
    72. <tref> Deprecated
    73. <tspan>
    74. <use>
    75. <view>
    76. <vkern> Deprecated
  6. Attributes
    1. accent-height Deprecated
    2. accumulate
    3. additive
    4. alignment-baseline
    5. alphabetic Deprecated
    6. amplitude
    7. arabic-form Deprecated
    8. ascent Deprecated
    9. attributeName
    10. attributeType Deprecated
    11. azimuth
    12. baseFrequency
    13. baseline-shift
    14. baseProfile Deprecated
    15. bbox Deprecated
    16. begin
    17. bias
    18. by
    19. calcMode
    20. cap-height Deprecated
    21. class
    22. clip Deprecated
    23. clip-path
    24. clip-rule
    25. clipPathUnits
    26. color
    27. color-interpolation
    28. color-interpolation-filters
    29. cursor
    30. cx
    31. cy
    32. d
    33. data-*
    34. decoding
    35. descent Deprecated
    36. diffuseConstant
    37. direction
    38. display
    39. divisor
    40. dominant-baseline
    41. dur
    42. dx
    43. dy
    44. edgeMode
    45. elevation
    46. end
    47. exponent
    48. fill
    49. fill-opacity
    50. fill-rule
    51. filter
    52. filterUnits
    53. flood-color
    54. flood-opacity
    55. font-family
    56. font-size
    57. font-size-adjust
    58. font-stretch
    59. font-style
    60. font-variant
    61. font-weight
    62. fr
    63. from
    64. fx
    65. fy
    66. g1 Deprecated
    67. g2 Deprecated
    68. glyph-name Deprecated
    69. glyph-orientation-horizontal Deprecated
    70. glyph-orientation-vertical Deprecated
    71. gradientTransform
    72. gradientUnits
    73. hanging Deprecated
    74. height
    75. horiz-adv-x Deprecated
    76. horiz-origin-x Deprecated
    77. horiz-origin-y Deprecated
    78. href
    79. id
    80. ideographic Deprecated
    81. image-rendering
    82. in
    83. in2
    84. intercept
    85. k Deprecated
    86. k1
    87. k2
    88. k3
    89. k4
    90. kernelMatrix
    91. kernelUnitLength
    92. keyPoints
    93. keySplines
    94. keyTimes
    95. lang
    96. lengthAdjust
    97. letter-spacing
    98. lighting-color
    99. limitingConeAngle
    100. marker-end
    101. marker-mid
    102. marker-start
    103. markerHeight
    104. markerUnits
    105. markerWidth
    106. mask
    107. maskContentUnits
    108. maskUnits
    109. mathematical Deprecated
    110. max
    111. media
    112. method Experimental
    113. min
    114. mode
    115. name Deprecated
    116. numOctaves
    117. opacity
    118. operator
    119. order
    120. orient
    121. orientation Deprecated
    122. origin
    123. overflow
    124. overline-position
    125. overline-thickness
    126. paint-order
    127. panose-1 Deprecated
    128. path
    129. pathLength
    130. patternContentUnits
    131. patternTransform
    132. patternUnits
    133. pointer-events
    134. points
    135. pointsAtX
    136. pointsAtY
    137. pointsAtZ
    138. preserveAlpha
    139. preserveAspectRatio
    140. primitiveUnits
    141. r
    142. radius
    143. refX
    144. refY
    145. repeatCount
    146. repeatDur
    147. requiredFeatures Deprecated
    148. restart
    149. result
    150. rotate Experimental
    151. rx
    152. ry
    153. scale
    154. seed
    155. shape-rendering
    156. side Experimental
    157. slope
    158. spacing
    159. specularConstant
    160. specularExponent
    161. spreadMethod
    162. startOffset
    163. stdDeviation
    164. stemh Deprecated
    165. stemv Deprecated
    166. stitchTiles
    167. stop-color
    168. stop-opacity
    169. strikethrough-position
    170. strikethrough-thickness
    171. string Deprecated
    172. stroke
    173. stroke-dasharray
    174. stroke-dashoffset
    175. stroke-linecap
    176. stroke-linejoin
    177. stroke-miterlimit
    178. stroke-opacity
    179. stroke-width
    180. style
    181. surfaceScale
    182. SVG attribute: crossorigin
    183. systemLanguage
    184. tabindex
    185. tableValues
    186. target
    187. targetX
    188. targetY
    189. text-anchor
    190. text-decoration
    191. text-rendering
    192. textLength
    193. to
    194. transform
    195. transform-origin
    196. type
    197. u1 Deprecated
    198. u2 Deprecated
    199. underline-position
    200. underline-thickness
    201. unicode Deprecated
    202. unicode-bidi
    203. unicode-range Deprecated
    204. units-per-em Deprecated
    205. v-alphabetic Deprecated
    206. v-hanging Deprecated
    207. v-ideographic Deprecated
    208. v-mathematical Deprecated
    209. values
    210. vector-effect
    211. version Deprecated
    212. vert-adv-y Deprecated
    213. vert-origin-x Deprecated
    214. vert-origin-y Deprecated
    215. viewBox
    216. visibility
    217. width
    218. widths Deprecated
    219. word-spacing
    220. writing-mode
    221. x
    222. x-height Deprecated
    223. x1
    224. x2
    225. xChannelSelector
    226. xlink:arcrole Deprecated
    227. xlink:href Deprecated
    228. xlink:show Deprecated
    229. xlink:title Deprecated
    230. xlink:type Deprecated
    231. xml:lang Deprecated
    232. xml:space Deprecated
    233. y
    234. y1
    235. y2
    236. yChannelSelector
    237. z
    238. zoomAndPan Deprecated
  7. Guides
    1. Applying SVG effects to HTML content
    2. Content type
    3. Namespaces crash course
    4. SVG animation with SMIL
    5. SVG as an Image
  • Example
  • Usage context
  • Specifications
  • Browser compatibility

The <g> SVG element is a container used to group other SVG elements.

Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the <use> element.

Example

html, body, svg { height: 100%; } html<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- Using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg>

Usage context

CategoriesContainer element, Structural element
Permitted contentAny number of the following elements, in any order:Animation elementsDescriptive elementsShape elementsStructural elementsGradient elements<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # GElement

Browser compatibility

BCD tables only load in the browser

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Apr 2, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Svg G X Y