dy

  • Revision slug: SVG/Attribute/dy
  • Revision title: dy
  • Revision id: 371291
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

« SVG Attribute reference home

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

For the {{SVGElement("feOffset")}} element, it's a <number> that represent the amount to offset the input graphic. This amount is expressed in the coordinate system established by the {{SVGAttr("primitiveUnits")}} attribute on the {{SVGElement("filter")}} element.

For the {{SVGElement("glyphRef")}} element, it's a <number> that reprsents the relative Y coordinate within the font's coordinate system for this glyph.

For {{SVGElement("text")}}, {{SVGElement("tspan")}}, {{SVGElement("tref")}} and {{SVGElement("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 Y coordinate for the current text position for the first character within this element or any of its descendants. The current text position is shifted along the y-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 y-axis for the current text position of the first n characters within this element or any of its descendants. Thus the current text position resulting from drawing the character within the current {{SVGElement("text")}} element is shifted along the Y 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 {{SVGElement("text")}} or {{SVGElement("tspan")}} element specifies a relative Y coordinate for the given character via a dy attribute, then the current text position is shifted along the y-axis of the current user coordinate system by that amount (nearest ancestor has precedence),
  • else no extra shift along the y-axis occurs.

Usage context

Categories None
Value <number> | <list-of-length>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): altGlyph element
SVG 1.1 (2nd Edition): feOffset element
SVG 1.1 (2nd Edition): glyphRef element
SVG 1.1 (2nd Edition): text element
SVG 1.1 (2nd Edition): tspan element

Elements

The following elements can use the x attribute

  • {{ SVGElement("altGlyph") }}
  • {{ SVGElement("feOffset") }}
  • {{ SVGElement("glyphRef") }}
  • {{ SVGElement("text") }}
  • {{ SVGElement("tref") }}
  • {{ SVGElement("tspan") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>dy</code> attribute indicates a shift along the y-axis on the position of an element or its content. What exactly is shifted depend on the element for which this attribute is set.</p>
<p>For the {{SVGElement("feOffset")}} element, it's a <a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a> that represent the amount to offset the input graphic. This amount is expressed in the coordinate system established by the {{SVGAttr("primitiveUnits")}} attribute on the {{SVGElement("filter")}} element.</p>
<p>For the {{SVGElement("glyphRef")}} element, it's a <a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a> that reprsents the relative Y coordinate within the font's coordinate system for this glyph.</p>
<p>For {{SVGElement("text")}}, {{SVGElement("tspan")}}, {{SVGElement("tref")}} and {{SVGElement("altGlyph")}} elements, things are a little more complex because they accept a <a href="/en/SVG/Content_type#List-of-&lt;var&gt;T&lt;.2Fvar&gt;s" title="/en/SVG/Content_type#List-of-&lt;var&gt;T&lt;.2Fvar&gt;s">&lt;list-of-length&gt;</a>:</p>
<p>If a single <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> is provided, this value represents the new relative Y coordinate for the current text position for the first character within this element or any of its descendants. The current text position is shifted along the y-axis of the current user coordinate system by <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> before the first character is rendered.<br />
  <br />
  If a comma- or space-separated list of n <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>s is provided, then the values represent incremental shifts along the y-axis for the current text position of the first n characters within this element or any of its descendants. Thus the current text position resulting from drawing the character within the current {{SVGElement("text")}} element is shifted along the Y axis of the current user coordinate system by <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>.<br />
  <br />
  If more characters exist than <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>s, then for each of these extra characters:</p>
<ul>
  <li>if an ancestor {{SVGElement("text")}} or {{SVGElement("tspan")}} element specifies a relative Y coordinate for the given character via a <code>dy</code> attribute, then the current text position is shifted along the y-axis of the current user coordinate system by that amount (nearest ancestor has precedence),</li>
  <li>else no extra shift along the y-axis occurs.</li>
</ul>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>None</td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a> | <a href="/en/SVG/Content_type#List-of-&lt;var&gt;T&lt;.2Fvar&gt;s" title="/en/SVG/Content_type#List-of-&lt;var&gt;T&lt;.2Fvar&gt;s">&lt;list-of-length&gt;</a></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDYAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDYAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br />
        <a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetDyAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feOffsetDyAttribute">SVG 1.1 (2nd Edition): feOffset element</a><br />
        <a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDYAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDYAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br />
        <a href="http://www.w3.org/TR/SVG11/text.html#TextElementDYAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#TextElementDYAttribute">SVG 1.1 (2nd Edition): text element</a><br />
        <a href="http://www.w3.org/TR/SVG11/text.html#TSpanElementDYAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#TSpanElementDYAttribute">SVG 1.1 (2nd Edition): tspan element</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>x</code> attribute</p>
<ul>
  <li>{{ SVGElement("altGlyph") }}</li>
  <li>{{ SVGElement("feOffset") }}</li>
  <li>{{ SVGElement("glyphRef") }}</li>
  <li>{{ SVGElement("text") }}</li>
  <li>{{ SVGElement("tref") }}</li>
  <li>{{ SVGElement("tspan") }}</li>
</ul>
Revert to this revision