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
定义了光源在 primitiveUnits
属性在 <filter>
元素中定义的坐标系中的 y 位置。
值 | <number> |
---|---|
默认值 | 0 |
可动画 | 是 |
<feSpecularLighting>
对于 <feSpecularLighting>
,y
定义了基元的渲染区域的最小 y 坐标。
值 | <length> | <percentage> |
---|---|
默认值 | 0% |
可动画 | 是 |
<feSpotLight>
对于 <feSpotLight>
,y
定义了光源在 primitiveUnits
属性在 <filter>
元素中定义的坐标系中的 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
属性值。
<glyphRef>
<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 |
可动画 | 是 |
<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>
text {
font: 40px sans-serif;
}
line {
fill: none;
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 2px;
}
<tref>
警告:从 SVG2 开始,<tref>
已被弃用,不应使用。
对于 <tref>
,如果它包含单个值,y
定义了必须放置内容文本位置的 y 坐标。内容文本位置通常是文本第一行的基线上的一个点。内容文本位置的具体位置受其他属性的影响,例如 text-anchor
或 direction
。
如果它包含多个值,y
定义了文本中每个单独字形的 y 坐标。如果值少于字形,则剩余字形将与最后一个定位的字形对齐。如果值多于字形,则额外的值将被忽略。
值 | (<length> | <percentage>)列表 |
---|---|
默认值 | 0 |
可动画 | 是 |
<tspan>
对于 <tspan>
,如果它包含单个值,y
定义了必须放置内容文本位置的 y 坐标。内容文本位置通常是文本第一行的基线上的一个点。内容文本位置的具体位置受其他属性的影响,例如 text-anchor
或 direction
。
如果它包含多个值,y
定义了文本中每个单独字形的 y 坐标。如果值少于字形,则剩余字形将与最后一个定位的字形对齐。如果值多于字形,则额外的值将被忽略。
值 | (<length> | <percentage>)列表 |
---|---|
默认值 | 无 |
可动画 | 是 |
<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>
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
值都小于前一个值。
<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>