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 |
可动画 | 是 |
<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>
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
。
如果它包含多个值,x
定义文本中每个单独字形的 x 坐标。如果值少于字形,则剩余字形将与最后一个定位的字形对齐。如果值多于字形,则多余的值将被忽略。
值 | (<length> | <percentage>)列表 |
---|---|
默认值 | 0 |
可动画 | 是 |
<tspan>
对于 <tspan>
,如果它包含单个值,x
定义 _内容文本位置_ 必须放置的 x 坐标。_内容文本位置_ 通常是文本第一行基线的某个点。_内容文本位置_ 的确切位置受其他属性的影响,例如 text-anchor
或 direction
。
如果它包含多个值,x
定义文本中每个单独字形的 x 坐标。如果值少于字形,则剩余字形将与最后一个定位的字形对齐。如果值多于字形,则多余的值将被忽略。
值 | (<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="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>
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
值都小于前一个值。
<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>