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>
預設值	第一個 `glyphRef` 為 `0`，對於所有後續兄弟 `<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 座標。此屬性的確切效果受 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,
body,
svg {
  height: 100%;
}

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

值	（<length> \| <percentage>）列表
預設值	`0`
可動畫	是

`<tspan>`

對於 <tspan>，如果它包含單個值，x 定義 _內容文字位置_ 必須放置的 x 座標。_內容文字位置_ 通常是文字第一行基線的某個點。_內容文字位置_ 的確切位置受其他屬性的影響，例如 text-anchor 或 direction。

值	（<length> \| <percentage>）列表
預設值	無
可動畫	是

html,
body,
svg {
  height: 100%;
}

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,
body,
svg {
  height: 100%;
}

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