files/zh-cn/web/svg/attribute/baseline-shift/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

---
title: baseline-shift
slug: Web/SVG/Attribute/baseline-shift
tags:
  - SVG
  - SVG属性
  - 需要兼容性表
translation_of: Web/SVG/Attribute/baseline-shift
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p>

<p>属性<code>baseline-shift</code>允许相对于父文本内容元素的<code>dominant-baseline</code>重定位<code>dominant-baseline</code>。该切换对象必须是一个下标或上标。</p>

<p>作为一个外观属性，它还可以直接作为CSS样式表内部的属性使用。请看{{ cssxref("baseline-shift","CSS baseline-shift") }}以了解更多信息。</p>

<h2 id="用法">用法</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">类别</th>
   <td>外观属性</td>
  </tr>
  <tr>
   <th scope="row">值</th>
   <td><strong>auto</strong> | baseline | super | sub | &lt;percentage&gt; | <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> | inherit</td>
  </tr>
  <tr>
   <th scope="row">可变性</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">规范文档</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<dl>
 <dt>baseline</dt>
 <dd>没有基线切换，<code>dominant-baseline</code>依然在原来的位置。</dd>
 <dt>sub</dt>
 <dd><code>dominant-baseline</code>切换到下标的默认位置。</dd>
 <dt>super</dt>
 <dd><code>dominant-baseline</code>切换到上标的默认位置</dd>
 <dt>&lt;percentage&gt;</dt>
 <dd>该属性的结果值是这个百分数乘以 {{ SVGElement("text") }}元素的{{ SVGAttr("line-height") }}。如果是正值，dominant-baseline向shift同方向移动结果值；如果是负值，dominant-baseline向shift反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。</dd>
 <dt><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></dt>
 <dd>如果是正值，dominant-baseline向shift同方向移动<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>距离；如果是负值，dominant-baseline向shift反方向移动<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>距离。值”0cm“等于”baseline“。</dd>
</dl>

<h2 id="示例">示例</h2>

<h2 id="元素">元素</h2>

<p><code><font face="Open Sans, Arial, sans-serif">下列这些元素可以使用</font>baseline-shift</code>属性。</p>

<ul>
 <li>{{ SVGElement("tspan") }}</li>
 <li>{{ SVGElement("tref") }}</li>
 <li>{{ SVGElement("altGlyph") }}</li>
 <li>{{ SVGElement("textPath") }}</li>
</ul>

<h2 id="参见">参见</h2>

<ul>
 <li>{{ cssxref("baseline-shift","CSS baseline-shift") }}</li>
</ul>