y - SVG | MDN - MDN 文档

元素

你可以在下面部分描述的 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,
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="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,
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="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,
body,
svg {
  height: 100%;
}

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 贡献者于 2025 年 4 月 16 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题