非常教程

SVG参考手册

属性 | Attributes

alignment-baseline(对齐基线)

alignment-baseline属性指定一个对象相对于其父对象的对齐方式。此属性指定此元素的哪个基线将与父级元素的相应基线对齐。例如,这允许罗马文字中的字母基线在字体大小变化上保持对齐。它默认为与alignment-baseline属性的计算值同名的基线。

作为一个表现属性,它也可以直接在一个CSS样式表中作为属性使用,请参阅css alignment-baseline进一步的信息。

用法上下文

Categories

Presentation attribute

Value

auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit

Animatable

Yes

Normative document

SVG 1.1 (2nd Edition)

实例

<?xml version="1.0"?>
<svg width="300" height="120" viewBox="0 0 300 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

    <!-- Materialisation of anchors -->
    <path d="M60,10 L60,110 
             M30,10 L300,10 
             M30,65 L300,65 
             M30,110 L300,110
             " stroke="grey" />
    
    <!-- Anchors in action -->
    <text alignment-baseline="hanging"
          x="60" y="10">A hanging</text>

    <text alignment-baseline="middle"
          x="60" y="65">A middle</text>

    <text alignment-baseline="baseline"
          x="60" y="110">A baseline</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="10" r="3" fill="red" />
    <circle cx="60" cy="65" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

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

实时样例

适用元素

以下元素可以使用该alignment-baseline属性

  • <tspan>
  • <tref>
  • <altGlyph>
  • <textPath>

对于其他元素(如<text>)中的对象对齐,请参阅dominant-baseline

属性 | Attributes相关

1.accent-height(焦点高度)
2.accumulate(积累)
3.additive
4.ascent
5.attributename(属性名字)
6.Attributes(属性)
7.attributetype(属性类型)
8.azimuth(方位)
9.basefrequency
10.baseline-shift(基线漂移)
11.baseprofile
12.begin(开始)
13.bias(偏压)
14.calcmode
15.class
16.clip(剪辑)
17.clip-path(剪辑路径)
18.clip-rule(剪辑规则)
19.clippathunits
20.color(颜色)
21.color-interpolation(彩色插值)
22.color-interpolation-filters(色彩插值滤波器)
23.color-profile(彩色轮廓)
24.color-rendering(显色)
25.contentscripttype
26.contentstyletype
27.cursor(光标)
28.cx
29.cy
30.d
31.diffuseconstant
32.direction(方向)
33.display(显示)
34.divisor
35.dominant-baseline(显性基线)
36.dur
37.dx
38.dy
39.edgemode
40.elevation
41.end
42.externalresourcesrequired
43.fill
44.fill-opacity
45.fill-rule
46.filter
47.filterres
48.filterunits
49.flood-color
50.flood-opacity
51.font-family
52.font-size
53.font-size-adjust
54.font-stretch
55.font-style
56.font-variant
57.font-weight
58.fr
59.from
60.fx
61.fy
62.gradienttransform
63.gradientunits
64.height
65.href
66.image-rendering
67.in
68.in2
69.k1
70.k2
71.k3
72.k4
73.kernelmatrix
74.kernelunitlength
75.kerning
76.keysplines
77.keytimes
78.lengthadjust
79.letter-spacing
80.lighting-color
81.limitingconeangle
82.local
83.marker-end
84.marker-mid
85.marker-start
86.markerheight
87.markerunits
88.markerwidth
89.mask
90.maskcontentunits
91.maskunits
92.max
93.min
94.mode
95.numoctaves
96.opacity
97.operator
98.order
99.overflow
100.overline-position
SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。