1. Web
  2. SVG
  3. 参考
  4. 属性
  5. x

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 属性值。

<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 坐标。此属性的具体效果受 patternUnits 和 patternTransform 属性的影响。

值 <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-anchor 或 direction。

如果它包含多个值，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;
}

<tspan>

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

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

值 列表（<length> | <percentage>）
默认值 none
可动画的 是
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
可动画的 是

注意： 在某些浏览器中，使用 x 几何属性在 CSS 中声明 <length> 或 <percentage> 值会覆盖由 x 属性设置的 <use> 的 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 蒙版模块 Level 1
# element-attrdef-mask-x
Scalable Vector Graphics (SVG) 2
# X
Scalable Vector Graphics (SVG) 2
# PatternElementXAttribute
Scalable Vector Graphics (SVG) 2
# TextElementXAttribute

另见

  • CSS x 属性

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.