W3cubDocs

/SVG

dx

The dx attribute indicates a shift along the x-axis on the position of an element or its content. What exactly is shifted depends on the element for which this attribute is set.

For the <feOffset> element, it's a <number> that represents the amount to offset the input graphic. This amount is expressed in the coordinate system established by the primitiveUnits attribute on the <filter> element.

For the <glyphRef> element, it's a <number> that represents the relative X coordinate within the font's coordinate system for this glyph.

For <text>, <tspan>, <tref>, and <altGlyph> elements, things are a little more complex because they accept a <list-of-length>:

If a single <length> is provided, this value represents the new relative X coordinate for the current text position for the first character within this element or any of its descendents. The current text position is shifted along the x-axis of the current user coordinate system by <length> before the first character is rendered.

If a comma- or space-separated list of n <length>s is provided, then the values represent incremental shifts along the x-axis for the current text position of the first n characters within this element or any of its descendents. Thus the current text position resulting from drawing the character within the current <text> element is shifted along the X axis of the current user coordinate system by <length>.

If more characters exist than <length>s, then for each of these extra characters:

  • if an ancestor <text> or <tspan> element specifies a relative X coordinate for the given character via a dx attribute, then the current text position is shifted along the x-axis of the current user coordinate system by that amount (nearest ancestor has precedence),
  • else no extra shift along the x-axis occurs.

Usage context

Elements

The following elements can use the dx attribute:

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dx