---
title: dx
slug: Web/SVG/Attribute/dx
tags:
  - NeedsCompatTable
  - NeedsExample
  - Reference
  - SVG
  - SVG Attribute
translation_of: Web/SVG/Attribute/dx
---
<p>« <a href="/en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p>

<p><code>dx</code> 属性は、要素またはその中身の位置についての、x 軸に沿ったずれを表します。まさしくずらされるものは、この属性が設定される要素によります。</p>

<p>{{SVGElement("feOffset")}} 要素の場合は、入力グラフィックをずらす量を表す <a href="/en-US/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a> です。この量は、 {{SVGElement("filter")}} 要素上に {{SVGAttr("primitiveUnits")}} 属性で確立した座標系で表されます。</p>

<p>{{SVGElement("glyphRef")}} 要素の場合は, このグリフについてのフォント座標系内での相対的 X 座標を表す <a href="/en-US/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a> です。</p>

<p>{{SVGElement("text")}} 要素、 {{SVGElement("tspan")}} 要素、 {{SVGElement("tref")}} 要素、{{SVGElement("altGlyph")}} 要素の場合は、<a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-length&gt;</a> を受け取るせいで、物事が少し複雑になります。</p>

<p>一つの <a href="/en-US/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a> が与えられた場合、この値は、この要素またはその子孫のうちのいずれかの内部における最初の文字についての現在テキスト位置の新たな相対的 X 座標です。 現在テキスト位置は 、最初の文字が描画される前に、現在のユーザ座標系の x 軸に沿って、 <a href="/en-US/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a> だけずらされます。<br>
 <br>
 カンマまたはスペースで区切られた n 個の <a href="/en-US/docs/Web/SVG/Content_type#Length">&lt;length&gt; </a>のリストが与えられた場合、これらの値は、この要素またはその子孫のうちのいずれかの内部における最初の n 文字についての現在テキスト位置の、x 軸に沿ったインクリメンタルなずれを表します。よって、現在の {{SVGElement("text")}} 要素内部の文字を描いた結果として得られる現在テキスト位置が、現在のユーザ座標系の X 軸に沿って、 <a href="/en-US/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a> だけずらされます。<br>
 <br>
 <a href="/en-US/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a> よりも多数の文字が存在する場合は、これらの余分な文字の各々について、以下のようにします。</p>

<ul>
 <li>先祖の {{SVGElement("text")}} 要素または {{SVGElement("tspan")}} 要素が、その与えられた文字について、 <code>dx</code> 属性を通じて相対 X 座標を指定している場合には、その量の分だけ、現在のユーザ座標系の x 軸に沿って、現在テキスト位置がずらされます (もっとも近い先祖が優先されます)。</li>
 <li>それ以外の場合は、x 軸に沿った更なるずれは起こりません。</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-US/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a> | <a href="/en-US/docs/Web/SVG/Content_type#List-of-&lt;var>T&lt;.2Fvar>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#AltGlyphElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): altGlyph element</a><br>
    <a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetDxAttribute">SVG 1.1 (2nd Edition): feOffset element</a><br>
    <a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): glyphRef element</a><br>
    <a href="http://www.w3.org/TR/SVG11/text.html#TextElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): text element</a><br>
    <a href="http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): tspan element</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Elements">Elements</h2>

<p>以下の要素が <code>dx</code> 属性を使えます。</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>