x

**x** 属性定义了用户坐标系中的 X 轴坐标。

元素

您可以将此属性与下面部分中描述的 SVG 元素一起使用。

<feBlend>

对于 <feBlend>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feColorMatrix>

对于 <feColorMatrix>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feComponentTransfer>

对于 <feComponentTransfer>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feComposite>

对于 <feComposite>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feConvolveMatrix>

对于 <feConvolveMatrix>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feDiffuseLighting>

对于 <feDiffuseLighting>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feDisplacementMap>

对于 <feDisplacementMap>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feDropShadow>

对于 <feDropShadow>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feFlood>

对于 <feFlood>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feFuncA>

对于 <feFuncA>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feFuncB>

对于 <feFuncB>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feFuncG>

对于 <feFuncG>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feFuncR>

对于 <feFuncR>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feGaussianBlur>

对于 <feGaussianBlur>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feImage>

对于 <feImage>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feMerge>

对于 <feMerge>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feMergeNode>

对于 <feMergeNode>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feMorphology>

对于 <feMorphology>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feOffset>

对于 <feOffset>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<fePointLight>

对于 <fePointLight>x<filter> 元素的 primitiveUnits 属性定义的坐标系中定义了光源的 X 位置。

<number>
默认值 0
可动画

<feSpecularLighting>

对于 <feSpecularLighting>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feSpotLight>

对于 <feSpotLight>x<filter> 元素的 primitiveUnits 属性定义的坐标系中定义了光源的 X 位置。

<number>
默认值 0
可动画

<feTile>

对于 <feTile>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<feTurbulence>

对于 <feTurbulence>x 定义了基元的渲染区域的最小 X 坐标。

<length> | <percentage>
默认值 0%
可动画

<filter>

对于 <filter>x 定义了过滤器渲染区域左上角的 X 坐标。

<length> | <percentage>
默认值 -10%
可动画

<foreignObject>

对于 <foreignObject>x 定义了其视窗左上角的 X 坐标。

<length> | <percentage>
默认值 0
可动画

注意: <foreignObject> 的 X 轴坐标也可以使用 x 几何属性 来定义。如果在 CSS 中设置,则 x 属性的值将覆盖 x 属性的值。

<glyphRef>

警告: 从 SVG2 开始,<glyphRef> 已被弃用,不应使用。

对于 <glyphRef>x 定义了字形的 X 轴坐标。

<number>
默认值 第一个 glyphRef0,对于所有后续兄弟 <glyphRef>,则为前一个 <glyphRef> 的结束 X 坐标。
可动画

<image>

对于 <image>x 定义了图像左上角的 X 坐标。

<length> | <percentage>
默认值 0
可动画

注意: <image> 的 X 轴坐标也可以使用 x 几何属性 来定义。如果在 CSS 中设置,则 x 属性的值将覆盖 x 属性的值。

<mask>

对于 <mask>x 定义了其影响区域的左上角的 X 坐标。此属性的确切效果受 maskUnits 属性的影响。

<length> | <percentage>
默认值 -10%
可动画

<pattern>

对于 <pattern>x 定义了平铺图案的左上角的 X 坐标。此属性的确切效果受 patternUnitspatternTransform 属性的影响。

<length>
默认值 0
可动画

<rect>

对于 <rect>x 定义了形状左上角的 X 坐标。

<length> | <percentage>
默认值 0
可动画

注意: <rect> 的 X 轴坐标也可以使用 x 几何属性 来定义。如果在 CSS 中设置,则 x 属性的值将覆盖 x 属性的值。

<svg>

对于 <svg>x 定义其视窗左上角的 x 坐标。

<length> | <percentage>
默认值 0
可动画

注意:<svg> 的 x 轴坐标也可以使用 x _几何属性_ 定义。如果在 CSS 中设置,x 属性值将覆盖 x 属性值。

<text>

对于 <text>,如果它包含单个值,x 定义 _内容文本位置_ 必须放置的 x 坐标。_内容文本位置_ 通常是文本第一行基线的某个点。_内容文本位置_ 的确切位置受其他属性的影响,例如 text-anchordirection

如果它包含多个值,x 定义文本中每个单独字形的 x 坐标。如果值少于字形,则剩余字形将与最后一个定位的字形对齐。如果值多于字形,则多余的值将被忽略。

<length> | <percentage>)列表
默认值 0
可动画
html
<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>
css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

<tref>

警告:从 SVG2 开始,<tref> 已弃用,不应使用。

对于 <tref>,如果它包含单个值,x 定义 _内容文本位置_ 必须放置的 x 坐标。_内容文本位置_ 通常是文本第一行基线的某个点。_内容文本位置_ 的确切位置受其他属性的影响,例如 text-anchordirection

如果它包含多个值,x 定义文本中每个单独字形的 x 坐标。如果值少于字形,则剩余字形将与最后一个定位的字形对齐。如果值多于字形,则多余的值将被忽略。

<length> | <percentage>)列表
默认值 0
可动画

<tspan>

对于 <tspan>,如果它包含单个值,x 定义 _内容文本位置_ 必须放置的 x 坐标。_内容文本位置_ 通常是文本第一行基线的某个点。_内容文本位置_ 的确切位置受其他属性的影响,例如 text-anchordirection

如果它包含多个值,x 定义文本中每个单独字形的 x 坐标。如果值少于字形,则剩余字形将与最后一个定位的字形对齐。如果值多于字形,则多余的值将被忽略。

<length> | <percentage>)列表
默认值
可动画
html
<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>
css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

<use>

对于 <use>x 定义所引用元素左上角的 x 坐标。

<length> | <percentage>
默认值 0
可动画

注意:在 CSS 中使用 x _几何属性_ 声明 <length><percentage> 值会覆盖某些浏览器中 <use>x 属性设置的 x 轴坐标。此行为是非标准的,已弃用,并且可能会在未来的浏览器版本中删除。

示例

此示例包含三个 <rect> 元素,每个元素的 x 值都小于前一个值。

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

规范

规范
滤镜效果模块级别 1
# element-attrdef-filter-x
滤镜效果模块级别 1
# element-attrdef-fespotlight-x
滤镜效果模块级别 1
# element-attrdef-fepointlight-x
滤镜效果模块级别 1
# element-attrdef-filter-primitive-x
CSS 遮罩模块级别 1
# element-attrdef-mask-x
可缩放矢量图形 (SVG) 2
# X
可缩放矢量图形 (SVG) 2
# PatternElementXAttribute
可缩放矢量图形 (SVG) 2
# TextElementXAttribute