添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
  • 字符 :在 XML 文档中,字符是指带有一个数字值的一个或多个字节,数字值与 Unicode 标准对应。例如,字母 g Unicode 值为 103 的字符。
  • 符号 :符号( glyph )是指字符的 视觉呈现 。每个字符都可以用很多不同的符号来呈现。
  • 一个符号可能由多个字符构成。一些字体为特定的字母组合(如fl和ff)准备了单独的符号,以使它们更好看,这种特性叫作“连字”(ligature)。有时候,一个字符也可能由几个符号组合而成,比如打印程序可能会组合符号e和重音符号(ˊ)来打印字符é(Unicode 值为 233)。

  • 字体 :字体是指代表某个 字符集合 的一组符号。
  • 基线 :字体中的所有符号以基线对齐。需要注意的是, 中文字体中的基线概念并没有西文字体那么明确
  • 上坡度 :基线到字体中最高字符顶部的距离称为上坡度( ascent )。
  • 下坡度 :基线到最深字符底部的距离称为下坡度( descent )。
  • em高度 :字符的总高度为上坡度和下坡度之和,也称为em高度。
  • em box :指宽度为em高度的方块。
  • 大写字母高度 :大写字母高度( cap-height )是指基线上的大写字母的高度。
  • x高度 :指基线到小写字母 x 顶部的高度。 x 高度通常能比em高度更好地衡量一个字体的尺寸和可读性
  • svg 字体的基本属性与 css 的属性基本一致:

  • font-family:
  • font-size:
  • font-weight:
  • font-style:
  • text-decoration:
  • word-spacing:
  • letter-spacing:
  • 可以通过 writing-mode 属性( css3 中也有这个属性)来设置文本排列的方向,如从右往左,从上往下等等;不过在svg中 writing-mode 属性使用的选项值是按照 IE 的规则:

    1
    -ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

    不过在实际使用中这些属性值貌似不是每一个都被支持,只有 tb top to bottom ,纵向排列)是被支持的:

    可以通过设置 <text> 元素的 x y 属性来确定文本的起点位置,而根据不同的对齐方式,字体符号所呈现的方式有所不同;可以通过 text-anchor 属性来设置文本与起点坐标的关系, text-anchor 属性有以下几个选项:

  • start(默认值) :以文本从左往右排列为例, x 表示该文本第一个符号的 em box 的左侧位置,而 y 表示基线位置;
  • middle :同理, x 表示该文本的水平中点位置,而 y 表示基线位置;
  • end x 表示该文本最后一个符号的 em box 的右侧位置,而 y 表示基线位置;
  • 通过在 <text> 元素内使用 <textPath> 元素可以为文字指定一条 path ,并按照 path 的形状进行文字排列;使用方法如下:

    1
    2
    <path d="M100 200h150 v100" id="pathID" fill="none"></path>
    <text><textPath xlink:href="#pathID">一段文字</textPath></text>

    这样 textPath 内包含的文字就会按照所指定的 #pathID 路径进行排列,这里既可以指定定义在 <defs> 内的路径,也可以是实际出现过的路径; 需要注意的是只能是 <path> 元素所定义的路径,像诸如 <rect> 这样的基本形状是不能被指定为路径的

    <text> 元素内文本并不会由于超过某一长度就会自动换行,也无法事先知道文本的终点在哪,但是可以通过 textLength 来控制文字的总长度(若文字原长度超过总长度也会被『压缩』在总长度内),并通过 lengthAdjust 属性来设置文本符号之间的间距和符号自身的大小; lengthAdjust 属性有以下选项:

    spacing(默认值) :只调整符号之间的间距,而不会改变符号本身的尺寸大小;因此当设置的 textLength 小于文本原有长度时,字符的间距为『负』,也就是会被挤压重叠到一块:

    spacingAndGlyphs :间距和符号本身的大小一起调整,按比例缩放。

    tspan元素

    <tspan> 元素有点类似 html 中的行内元素 <span> ,可以用来对 <text> 内的一段文本进行单独调整;除了基本的文字样式之外, <tspan> 元素还可以调整文本的位置和变形。

  • x,y :指定绝对位置坐标;
  • dx,dy :指定相对位置坐标;
  • 需要注意的是, 设置以上属性会影响该 <tspan> 后面的文本

  • baseline-shift :调整文本符号的 基线位置 ,可以是一个长度值,也可以是 super (上标)和 sub (下标);该属性只会对 <tspan> 内产生作用!
  • rotate :对 <tspan> 内的每个文本符号进行旋转(单独地?),单位为 度数
  • 改变CSS世界纵横规则的writing-mode属性 « 张鑫旭-鑫空间-鑫生活
  • 《SVG精髓(第2版)》
  •