Basic Transformations - SVG: Scalable Vector Graphics | MDN

Trang chủ » Html Scale Svg Element » Basic Transformations - SVG: Scalable Vector Graphics | MDN

Có thể bạn quan tâm

  1. References
  2. SVG
  3. SVG Tutorial
  4. Basic transformations
Article Actions
  • English (US)
    • Français
    • 日本語
    • Русский
    • 中文 (简体)
  • Example
  • Translation
  • Rotation
  • Multiple transformations
  • Skewing
  • Scaling
  • Complex transformations with matrix()
  • Effects on Coordinate Systems
  • Embedding SVG in SVG
  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> — the SVG accessible name element
    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 Deprecated
    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
  • Translation
  • Rotation
  • Multiple transformations
  • Skewing
  • Scaling
  • Complex transformations with matrix()
  • Effects on Coordinate Systems
  • Embedding SVG in SVG
  • « Previous
  • Next »

Now we're ready to start distorting our beautiful images. But first, let's formally introduce the <g> element. With this helper, you can assign properties to a complete set of elements. Actually, that's its only purpose.

Example

html<svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg>

All following transformations are summed up in an element's transform attribute. Transformations can be chained by concatenating them, separated by whitespace.

Translation

It may be necessary to move an element around, even though you can position it with the according attributes. For this purpose, the translate() transformation stands ready.

html<svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg>

The example will render a rectangle, translated to the point (30,40) instead of (0,0).

If the second value is not given, it is assumed to be 0.

Rotation

Rotating an element is quite a common task. Use the rotate() transformation for this:

html<svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg>

This example shows a square that is rotated by 45 degrees. The value for rotate() is given in degrees.

Multiple transformations

Transformations can be concatenated easily just by separating them with spaces. For example, translate() and rotate() are common used transformations.

html<svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg>

This example shows again the small square shown above that this time is also rotated by 45 degrees.

Skewing

To make a rhombus out of our rectangle, the skewX() and skewY() transformations are available. Each one takes an angle that determines how far the element will be skewed.

Scaling

scale() changes the size of an element. It takes two numbers, the first being the x scale factor and the second being the y scale factor. The factors are taken as the ratio of the transformed dimension to the original. For example, 0.5 shrinks by 50%. If the second number is omitted, it is assumed to be equal to the first.

Complex transformations with matrix()

All the above transformations can be expressed by a 2x3 transformation matrix. To combine several transformations, one can set the resulting matrix directly with the matrix(a, b, c, d, e, f) transformation which maps coordinates from a previous coordinate system into a new coordinate system by

{ x newCoordSys = a x prevCoordSys + c y prevCoordSys + e y newCoordSys = b x prevCoordSys + d y prevCoordSys + f \left{ \begin{matrix} x*{\mathrm{prevCoordSys}} = a x*{\mathrm{newCoordSys}} + c y*{\mathrm{newCoordSys}} + e \ y*{\mathrm{prevCoordSys}} = b x*{\mathrm{newCoordSys}} + d y*{\mathrm{newCoordSys}} + f \end{matrix} \right.

See a concrete example on the SVG transform documentation. Detailed information about this property can be found in the SVG Recommendation.

Effects on Coordinate Systems

When using transformations you establish a new coordinate system inside the element the transformations apply to. That means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation.

html<svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg>

The resulting rectangular in the above example will be 100x100px. The more intriguing effects arise, when you rely on attributes like userSpaceOnUse and the such.

Embedding SVG in SVG

In contrast to HTML, SVG allows you to embed other svg elements seamlessly. This way you can also create new coordinate systems by utilizing the viewBox, width and height of the inner svg element.

html<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg> </svg>

The example above has basically the same effect as the one above, namely that the rect will be twice as large as specified.

  • « Previous
  • Next »

Help improve MDN

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

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

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

Từ khóa » Html Scale Svg Element