dx

dx 属性表示元素或其内容位置沿 x 轴的偏移量。

您可以将此属性与以下 SVG 元素一起使用

示例

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

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Some reference text -->
  <text x="10%" y="50%" fill="grey">SVG</text>

  <!-- The same text with a shift along the x-axis -->
  <text dx="50%" x="10%" y="50%">SVG</text>
</svg>

css

line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

feDropShadow

对于 <feDropShadow>，dx 定义了阴影的 x 偏移量。用于解析属性值的单位由 <filter> 元素的 primitiveUnits 属性设置。

值	<number>
默认值	`2`
可动画	是

feOffset

对于 <feOffset>，dx 定义了滤镜输入图形的 x 偏移量。用于解析属性值的单位由 <filter> 元素的 primitiveUnits 属性设置。

值	<number>
默认值	`0`
可动画	是

glyphRef

警告： 从 SVG2 开始，<glyphRef> 已被弃用，不应使用。

对于 <glyphRef>，dx 定义了字形的 x 偏移量，以字形度量系统为单位。

值	<number>
默认值	`0`
可动画	是

text

对于 <text>，如果它包含单个值，则 dx 定义了所有字形沿 x 轴的偏移量。

如果有多个值，则 dx 定义了每个字形相对于前一个字形沿 x 轴的偏移量。如果值少于字形，则剩余的字形将使用 0 值。如果值多于字形，则多余的值将被忽略。

值	(<length> \| <percentage>) 列表
默认值	无
可动画	是

示例

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

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="25%" y2="25%" />
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="0" x2="100%" y1="75%" y2="75%" />

  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="30%" x2="30%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Behaviors change based on the number
       of values in the attributes -->
  <text dx="20%" x="10%" y="25%">SVG</text>
  <text dx="0 10%" x="10%" y="50%">SVG</text>
  <text dx="0 10% 20%" x="10%" y="75%">SVG</text>
</svg>

css

line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

tref

警告： 从 SVG2 开始，<tref> 已被弃用，不应使用。

对于 <tref>，如果它包含单个值，则 dx 定义了所有字形沿 x 轴的偏移量。

值	(<length> \| <percentage>) 列表
默认值	无
可动画	是

tspan

对于 <tspan>，如果它包含单个值，则 dx 定义了所有备用字形沿 x 轴的偏移量。

值	(<length> \| <percentage>) 列表
默认值	无
可动画	是

规范

规范
滤镜效果模块级别 1 # element-attrdef-fedropshadow-dx
滤镜效果模块级别 1 # element-attrdef-feoffset-dx
可缩放矢量图形 (SVG) 2 # TextElementDXAttribute