一個簡單的字型

一個簡單的 svg 字型示例。這裡有幾點需要注意:

  • 字形的座標系與 svg 中的通常座標系相對。 y 軸指向上方。點 0,0 位於右下角。
  • 必須逆時針繪製字型中的所有路徑。
  • 在大多數工具中,僅支援字形元素的 d 屬性。雖然技術上允許,但子元素不起作用。
<svg xmlns="http://www.w3.org/2000/svg">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode="a" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
    <glyph unicode="b" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
  </font>
</svg>

如果你有更寬或更窄的字形,只需更改字形元素本身的 horiz-adv-x 即可。

<glyph unicode="a" horiz-adv-x="512" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />

字型採摘

unicode 屬性用於以後的字形選擇。你可以使用簡單的字母或 unicode 程式碼點以及連字(字母或 unicode 程式碼點的組合)

  • unicode="abc"
  • unicode="&#97;&#98;"
  • unicode="ab&#97;&#98;"
  • unicode="a"
  • unicode="&#98;"

字元總是通過第一次匹配來選擇,所以在任何單個字元之前都要有所有連字

unicode 程式碼點可以用十進位制 &#123; 或十六進位制 &#x1f 表示法編寫。