1. Web
  2. SVG
  3. 参考
  4. 属性
  5. dominant-baseline

dominant-baseline

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2020 年 7 月以来，它已在各大浏览器中可用。

dominant-baseline 属性指定主基线，即用于对齐框的文本和内联级内容的基线。它还指示在框的对齐上下文中参与基线对齐的任何框的默认对齐基线。

它用于确定或重新确定缩放基线表。缩放基线表是一个复合值，由三个部分组成：

  1. 主基线的基线标识符，
  2. 基线表，以及
  3. 基线表字体大小。

该属性的一些值会重新确定所有三个值。其他值仅重新建立基线表字体大小。当初始值 auto 产生不希望的结果时，可以使用此属性显式设置所需的缩放基线表。

如果标称字体中没有基线表，或者如果基线表缺少所需基线的条目，则浏览器可以使用启发式方法确定所需基线的位置。

注意：作为表现属性，dominant-baseline 也有一个 CSS 属性对应项：dominant-baseline。当两者都指定时，CSS 属性优先。

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

示例

html
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />

  <text dominant-baseline="auto" x="30" y="20">Auto</text>
  <text dominant-baseline="middle" x="30" y="50">Middle</text>
  <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>

用法说明

值 auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top
默认值 auto
可动画的 离散
auto

如果此属性出现在 <text> 元素上，则计算值取决于 writing-mode 属性的值。

如果 writing-mode 是水平的，则主基线组件的值为 alphabetic。否则，如果 writing-mode 是垂直的，则主基线组件的值为 central。

如果此属性出现在 <tspan> 或 <textPath> 元素上，则主基线和基线表组件与父文本内容元素的保持相同。

如果计算的 baseline-shift 值实际移动了基线，则基线表字体大小组件设置为 dominant-baseline 属性所在元素的 font-size 属性的值，否则基线表字体大小与该元素的保持相同。

如果没有父文本内容元素，则缩放基线表值按照上述 <text> 元素的方式构造。

use-script

主基线和基线表组件通过确定字符数据内容的主要脚本来设置。writing-mode，无论是水平还是垂直，都用于选择适当的基线表集，并且主基线用于选择与该基线对应的基线表。基线表字体大小组件设置为 dominant-baseline 属性所在元素的 font-size 属性的值。

no-change

主基线、基线表和基线表字体大小与父文本内容元素的保持相同。

reset-size

主基线和基线表保持不变，但基线表字体大小更改为该元素的 font-size 属性的值。这会根据当前的 font-size 重新缩放基线表。

ideographic

主基线的基线标识符设置为 ideographic，派生基线表使用字体中的 ideographic 基线表构建，并且基线表字体大小更改为该元素的 font-size 属性的值。

alphabetic

主基线的基线标识符设置为 alphabetic，派生基线表使用字体中的 alphabetic 基线表构建，并且基线表字体大小更改为该元素的 font-size 属性的值。

hanging

主基线的基线标识符设置为 hanging，派生基线表使用字体中的 hanging 基线表构建，并且基线表字体大小更改为该元素的 font-size 属性的值。

mathematical

主基线的基线标识符设置为 mathematical，派生基线表使用字体中的 mathematical 基线表构建，并且基线表字体大小更改为该元素的 font-size 属性的值。

central

主基线的基线标识符设置为 central。派生基线表根据字体中基线表中的定义基线构建。该字体基线表按照以下基线表名称的优先顺序选择：ideographic、alphabetic、hanging、mathematical。基线表字体大小更改为该元素的 font-size 属性的值。

middle

主基线的基线标识符设置为 middle。派生基线表根据字体中基线表中的定义基线构建。该字体基线表按照以下基线表名称的优先顺序选择：alphabetic、ideographic、hanging、mathematical。基线表字体大小更改为该元素的 font-size 属性的值。

text-after-edge

主基线的基线标识符设置为 text-after-edge。派生基线表根据字体中基线表中的定义基线构建。从字体中的基线表中选择哪个字体基线表取决于浏览器。基线表字体大小更改为该元素的 font-size 属性的值。

text-before-edge

主基线的基线标识符设置为 text-before-edge。派生基线表根据字体中基线表中的定义基线构建。从字体中的基线表中选择哪个基线表取决于浏览器。基线表字体大小更改为该元素的 font-size 属性的值。

text-top

此值使用 em 框的顶部作为基线。

SVG

html
<svg
  width="400"
  height="300"
  viewBox="0 0 300 300"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,20 L60,270
           M30,20 L400,20
           M30,70 L400,70
           M30,120 L400,120
           M30,170 L400,170
           M30,220 L400,220
           M30,270 L400,270"
    stroke="grey" />

  <!-- Anchors in action -->
  <text dominant-baseline="auto" x="70" y="20">auto</text>
  <text dominant-baseline="middle" x="70" y="70">middle</text>
  <text dominant-baseline="hanging" x="70" y="170">hanging</text>
  <text dominant-baseline="mathematical" x="70" y="220">mathematical</text>
  <text dominant-baseline="text-top" x="70" y="270">text-top</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="20" r="3" fill="red" />
  <circle cx="60" cy="70" r="3" fill="red" />
  <circle cx="60" cy="120" r="3" fill="red" />
  <circle cx="60" cy="170" r="3" fill="red" />
  <circle cx="60" cy="220" r="3" fill="red" />
  <circle cx="60" cy="270" r="3" fill="red" />

  <style>
    <![CDATA[
      text {
        font: bold 30px Verdana, Helvetica, Arial, sans-serif;
      }
      ]]>
  </style>
</svg>

结果

规范

规范
CSS 内联布局模块级别 3
# dominant-baseline-property
Scalable Vector Graphics (SVG) 2
# DominantBaselineProperty

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题