1. Web
  2. SVG
  3. 參考
  4. 屬性
  5. y

y

y 屬性定義了使用者座標系統中的 y 軸座標。

元素

你可以在下面部分描述的 SVG 元素中使用此屬性。

<feBlend>

對於 <feBlend>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feColorMatrix>

對於 <feColorMatrix>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feComponentTransfer>

對於 <feComponentTransfer>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feComposite>

對於 <feComposite>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feConvolveMatrix>

對於 <feConvolveMatrix>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feDiffuseLighting>

對於 <feDiffuseLighting>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feDisplacementMap>

對於 <feDisplacementMap>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feDropShadow>

對於 <feDropShadow>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feFlood>

對於 <feFlood>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feFuncA>

對於 <feFuncA>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feFuncB>

對於 <feFuncB>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feFuncG>

對於 <feFuncG>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feFuncR>

對於 <feFuncR>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feGaussianBlur>

對於 <feGaussianBlur>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feImage>

對於 <feImage>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feMerge>

對於 <feMerge>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feMergeNode>

對於 <feMergeNode>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feMorphology>

對於 <feMorphology>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feOffset>

對於 <feOffset>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<fePointLight>

對於 <fePointLight>，y 定義了光源在 <filter> 元素的 primitiveUnits 屬性所定義的座標系統中的 y 位置。

值 <number>
預設值 0
可動畫的 是

<feSpecularLighting>

對於 <feSpecularLighting>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feSpotLight>

對於 <feSpotLight>，y 定義了光源在 <filter> 元素的 primitiveUnits 屬性所定義的座標系統中的 y 位置。

值 <number>
預設值 0
可動畫的 是

<feTile>

對於 <feTile>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<feTurbulence>

對於 <feTurbulence>，y 定義了基元渲染區域的最小 y 座標。

值 <length> | <percentage>
預設值 0%
可動畫的 是

<filter>

對於 <filter>，y 定義了濾鏡渲染區域左上角的 y 座標。

值 <length> | <percentage>
預設值 -10%
可動畫的 是

<foreignObject>

對於 <foreignObject>，y 定義了其視口左上角的 y 座標。

值 <length> | <percentage>
預設值 0
可動畫的 是

注意： <foreignObject> 的 y 軸座標也可以透過 y 幾何屬性來定義。如果透過 CSS 設定，y 屬性值會覆蓋 y 屬性值。

<image>

對於 <image>，y 定義了影像左上角的 y 座標。

值 <length> | <percentage>
預設值 0
可動畫的 是

注意： <image> 的 y 軸座標也可以透過 y 幾何屬性來定義。如果透過 CSS 設定，y 屬性值會覆蓋 y 屬性值。

<mask>

對於 <mask>，y 定義了其作用區域左上角的 y 座標。此屬性的確切效果受 maskUnits 屬性的影響。

值 <length> | <percentage>
預設值 -10%
可動畫的 是

<pattern>

對於 <pattern>，y 定義了平鋪圖案左上角的 y 座標。此屬性的確切效果受 patternUnits 和 patternTransform 屬性的影響。

值 <length>
預設值 0
可動畫的 是

<rect>

對於 <rect>，y 定義了形狀左上角的 y 座標。

值 <length> | <percentage>
預設值 0
可動畫的 是

注意： <rect> 的 y 軸座標也可以透過 y 幾何屬性來定義。如果透過 CSS 設定，y 屬性值會覆蓋 y 屬性值。

<svg>

對於 <svg>，y 定義了其視口左上角的 y 座標。

值 <length> | <percentage>
預設值 0
可動畫的 是

注意： <svg> 的 y 軸座標也可以透過 y 幾何屬性來定義。如果透過 CSS 設定，y 屬性值會覆蓋 y 屬性值。

<text>

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

如果它包含多個值，y 定義了文字中每個單獨字形的 y 座標。如果值少於字形，則剩餘的字形將與最後一個定位的字形對齊放置。如果值多於字形，則忽略額外的值。

值 列表（<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="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <!-- y with a single value -->
  <text y="40%" x="5%">SVG</text>

  <!-- y with multiple values -->
  <text y="40%,60%,80%" x="55%">SVG</text>
</svg>
css
text {
  font: 40px sans-serif;
}

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

<tspan>

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

如果它包含多個值，y 定義了文字中每個單獨字形的 y 座標。如果值少於字形，則剩餘的字形將與最後一個定位的字形對齊放置。如果值多於字形，則忽略額外的值。

值 列表（<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="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <text>
    <!-- y with a single value -->
    <tspan y="40%" x="5%">SVG</tspan>

    <!-- y with multiple values -->
    <tspan y="40%,60%,80%" x="55%">SVG</tspan>
  </text>
</svg>
css
text {
  font: 40px sans-serif;
}

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

<use>

對於 <use>，y 定義了引用元素左上角的 y 座標。

值 <length> | <percentage>
預設值 0
可動畫的 是

注意： 在某些瀏覽器中，使用 y 幾何屬性在 CSS 中宣告 <length> 或 <percentage> 值會覆蓋 <use> 透過 y 屬性設定的 y 軸座標。此行為存在風險。

示例

此示例包含三個 <rect> 元素，每個元素的 y 值都小於前一個值。

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

規範

規範
濾鏡效果模組第 1 級
# element-attrdef-filter-y
濾鏡效果模組第 1 級
# element-attrdef-fespotlight-y
濾鏡效果模組第 1 級
# element-attrdef-fepointlight-y
濾鏡效果模組第 1 級
# element-attrdef-filter-primitive-y
CSS 蒙版模組 Level 1
# element-attrdef-mask-y
Scalable Vector Graphics (SVG) 2
# Y
Scalable Vector Graphics (SVG) 2
# PatternElementYAttribute
Scalable Vector Graphics (SVG) 2
# TextElementYAttribute

另見

  • CSS y 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面上次由 MDN 貢獻者於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.