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 上檢視此頁面 • 報告此內容存在的問題
© . Content available under a Creative Commons license.