svg文字_html/css_WEB-ITnose

标签

Example 4 Dome

      在平坦的路上曲折前行   

transform="rotate(30 20,40)" 表示在 （20.40）位置顺时针旋转30度

dx dy

svg 中虽然没有提供排版的相关支持，但是你可以 通过 dx dy 来设置错落的文字
让我们感受下：

Example 5 Dome

               12345                     12345                     12345                     我爱你中国         

rotate

rotate 文字的旋转属性，rotate可以是个数值列表分别作用于对应的字母，如下面例子
Example 6 Dome

               在平坦的路上曲折前行         

还是得把baseline拿出来，旋转的单位是度，因为我们的习惯是屏幕定位，所以旋转是沿着y轴顺时针旋转。旋转基于每个字母的基线和字母左边。在例子中，文字（字母）是多于rotate的，这时候按照rotate list 的最后一个规则定义多出的字母。

textLength

textLength不好理解，不是文字的长度的意思，指定文字以 textLength 的 SVG viewer去两端对齐排这些文字类似 css text-align:justify

Example 7 Dome

               在平坦的路上曲折前行         

还有个属性配合textLength使用----lengthAdjust
lengthAdjust 有两个值spacing （默认）和 spacingAndGlyphs当设置成spacingAndGlyphs的时候，会拉伸字母，知道适合充满textLength 不太好理解，看下实例就懂了。

Example 7 Dome

               在平坦的路上曲折前行                     在平坦的路上曲折前行         

的使用

标签的使用：
使用过Illustrator的朋友都知道，我们可以让文字跟随路径，做出各种形状的文字。我们需要用 来定义 (会在大漠之后相关文章中介绍)。定义好路径后，文字就可以跟着定义的路径跑了。

Example 8 Dome

                                   在平坦的路上曲折前行                   在平坦的路上曲折前行         

xlink:href 来指定 startOffset 来指定在路径上的起始位置。

这里xlink:href 不但能指定路径，还能指定一段文字。如例子：

Example 9 Dome

查看更多关于svg文字_html/css_WEB-ITnose的详细内容...