x

1. 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>

x attribute defines an x-axis coordinate in the user coordinate system.

You can use this attribute with the following SVG elements:

• <altGlyph>
• <cursor>
• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feDropShadow>
• <feFlood>
• <feFuncA>
• <feFuncB>
• <feFuncG>
• <feFuncR>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMergeNode>
• <feMorphology>
• <feOffset>
• <fePointLight>
• <feSpecularLighting>
• <feSpotLight>
• <feTile>
• <feTurbulence>
• <filter>
• <foreignObject>
• <glyphRef>
• <image>
• <mask>
• <pattern>
• <rect>
• <svg>
• <symbol>
• <text>
• <tref>
• <tspan>
• <use>

范例

html,body,svg { height:100% }

								

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="20"  y="20" width="60" height="60" />
  <rect x="120" y="20" width="60" height="60" />
  <rect x="220" y="20" width="60" height="60" />
</svg>

								

altGlyph

警告： As of SVG2 <altGlyph> is deprecated and shouldn't be used.

For <altGlyph> , x defines the x-axis coordinate of the alternate glyph.

feBlend

For <feBlend> , x defines the minimum x coordinate for the rendering area of the primitive.

feColorMatrix

For <feColorMatrix> , x defines the minimum x coordinate for the rendering area of the primitive.

feComponentTransfer

For <feComponentTransfer> , x defines the minimum x coordinate for the rendering area of the primitive.

feComposite

For <feComposite> , x defines the minimum x coordinate for the rendering area of the primitive.

feConvolveMatrix

For <feConvolveMatrix> , x defines the minimum x coordinate for the rendering area of the primitive.

feDiffuseLighting

For <feDiffuseLighting> , x defines the minimum x coordinate for the rendering area of the primitive.

feDisplacementMap

For <feDisplacementMap> , x defines the minimum x coordinate for the rendering area of the primitive.

feDropShadow

For <feDropShadow> , x defines the minimum x coordinate for the rendering area of the primitive.

feFlood

For <feFlood> , x defines the minimum x coordinate for the rendering area of the primitive.

feFuncA

For <feFuncA> , x defines the minimum x coordinate for the rendering area of the primitive.

feFuncB

For <feFuncB> , x defines the minimum x coordinate for the rendering area of the primitive.

feFuncG

For <feFuncG> , x defines the minimum x coordinate for the rendering area of the primitive.

feFuncR

For <feFuncR> , x defines the minimum x coordinate for the rendering area of the primitive.

feGaussianBlur

For <feGaussianBlur> , x defines the minimum x coordinate for the rendering area of the primitive.

feImage

For <feImage> , x defines the minimum x coordinate for the rendering area of the primitive.

feMerge

For <feMerge> , x defines the minimum x coordinate for the rendering area of the primitive.

feMergeNode

For <feMergeNode> , x defines the minimum x coordinate for the rendering area of the primitive.

feMorphology

For <feMorphology> , x defines the minimum x coordinate for the rendering area of the primitive.

feOffset

For <feOffset> , x defines the minimum x coordinate for the rendering area of the primitive.

fePointLight

For <fePointLight> , x defines the x location for the light source in the coordinate system defined by the primitiveUnits 属性在 <filter> 元素。

feSpecularLighting

For <feSpecularLighting> , x defines the minimum x coordinate for the rendering area of the primitive.

feSpotLight

For <feSpotLight> , x defines the x location for the light source in the coordinate system defined by the primitiveUnits 属性在 <filter> 元素。

feTile

For <feTile> , x defines the minimum x coordinate for the rendering area of the primitive.

feTurbulence

For <feTurbulence> , x defines the minimum x coordinate for the rendering area of the primitive.

filter

For <filter> , x defines the x coordinate of the upper left corner for the rendering area of the filter.

foreignObject

For <foreignObject> , x defines the  x coordinate of the upper left corner of its viewport.

注意： Starting with SVG2, x 是 Geometry Property meaning this attribute can also be used as a CSS property for <foreignObject> .

glyphRef

警告： As of SVG2 <glyphRef> is deprecated and shouldn't be used.

For <glyphRef> , x defines the x-axis coordinate of the glyph.

image

For <image> , x defines the  x coordinate of the upper left corner of the image.

注意： Starting with SVG2, x 是 Geometry Property meaning this attribute can also be used as a CSS property for images.

mask

For <mask> , x defines the  x coordinate of the upper left corner of its area of effect. The exact effect of this attribute is influenced by the maskUnits 属性。

pattern

For <pattern> , x defines the  x coordinate of the upper left corner of the tile pattern. The exact effect of this attribute is influenced by the patternUnits and patternTransform 属性。

rect

For <rect> , x defines the  x coordinate of the upper left corner of the shape.

注意： Starting with SVG2, x 是 Geometry Property meaning this attribute can also be used as a CSS property for rectangles.

svg

For <svg> , x defines the  x coordinate of the upper left corner of its viewport.

注意： Starting with SVG2, x 是 Geometry Property meaning this attribute can also be used as a CSS property for <svg> .

text

For <text> , if it contain a single value, x defines the x coordinate on where the content text position must be placed. The content text position is usually a point on the baseline of the first line of text. The exact content text position is influenced by some properties like text-anchor ，或 direction .

If there are multiple values, x defines the x coordinate of each individual glyph from the text. If there are less values than glyphs, the remaining glyphs are placed in the continuity of the last positioned glyph. If there are more values than glyphs, extra values are ignored.

html,body,svg { height:100% }

								

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />
  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />
  <!-- x with a single value -->
  <text y="40%" x="50%">SVG</text>
  <!-- x with multiple values -->
  <text y="90%" x="25%, 50%, 75%">SVG</text>
</svg>

								

text {
  font: 40px sans-serif;
}
line {
  fill: none;
  stroke: red;
  stroke-width: .5px;
  stroke-dasharray: 2px;
}

								

tref

警告： As of SVG2 <tref> is deprecated and shouldn't be used.

For <tref> , if it contain a single value, x defines the x coordinate on where the content text position must be placed. The content text position is usually a point on the baseline of the first line of text. The exact content text position is influenced by some properties like text-anchor ，或 direction .

If there are multiple values, x defines the x coordinate of each individual glyph from the text. If there are less values than glyphs, the remaining glyphs are placed in the continuity of the last positioned glyph. If there are more values than glyphs, extra values are ignored.

tspan

For <tspan> , if it contain a single value, x defines the x coordinate on where the content text position must be placed. The content text position is usually a point on the baseline of the first line of text. The exact content text position is influenced by some properties like text-anchor ，或 direction .

If there are multiple values, x defines the x coordinate of each individual glyph from the text. If there are less values than glyphs, the remaining glyphs are placed in the continuity of the last positioned glyph. If there are more values than glyphs, extra values are ignored.

html,body,svg { height:100% }

								

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />
  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />
  <text>
    <!-- x with a single value -->
    <tspan y="40%" x="50%">SVG</tspan>
    <!-- x with multiple values -->
    <tspan y="90%" x="25%, 50%, 75%">SVG</tspan>
  </text>
</svg>

								

text {
  font: 40px sans-serif;
}
line {
  fill: none;
  stroke: red;
  stroke-width: .5px;
  stroke-dasharray: 2px;
}

								

使用

For <use> , x defines the  x coordinate of the upper left corner of the referenced element.

注意： Starting with SVG2, x 是 Geometry Property meaning this attribute can also be used as a CSS property for used elements.

规范

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 .

最后修改： Jan 22, 2022 , 由 MDN 贡献者