使用tspan元素给SVG文本添加样式、定位
来源:互联网 发布:机锋论坛软件区 编辑:程序博客网 时间:2024/05/31 11:04
tspan元素
你可以把<tspan>元素当成SVG文本的span。你可以用<tspan>来包裹SVG文本,来对它们做整体控制,关于显示和定位,文本片段之间的相互关系等。
我们从一个简单的示例开始。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG</tspan>
<tspan>SVG</tspan>
</text>
</svg>
这里大多数的代码对你来说应该是熟悉的,在阅读了前面两篇文章之后。我创建了一个<svg>元素,定义了SVG视窗的尺寸,添加了一个红色的边框,这样我们可以看到它的边界。我还把font-size设置为2em,以及overflow: visible;,这样我们可以看到视窗之外的内容。
我在(240,120)的位置放置了一个text元素,里边有两个tspan,每个都包含了内容为SVG的文本。效果如下:
tspan中的文本按照内联顺序排列,和它们直接在text元素中显示的一样,中间有个空格。
有一点非常有趣的是,可以给<text>元素添加的属性也都可以添加给<tspan>元素。
我们来改变一下第二个tspan的位置,通过设置x和y坐标。这样我们可以把两个tspan分开。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan x="10" y="10">SVG 2</tspan>
</text>
</svg>
我把第二个tspan移到了(10,10)的位置。因为x和y都是绝对定位,SVG 2的位置就移到了视窗的左边缘,也就是上边缘的下方。
你可能记得上一篇文章中我们提到了y坐标表示的是基线的位置,不是文本的顶部或底部,而是在中间的一个位置。
为了相对定位,我们可以在下面的实例中使用dx和dy来定位。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan dx="50,10,10,0,5" dy="50,10,10,10">SVG 2</tspan>
</text>
</svg>
对于上面的第一个字符“S”,如果没有给定dx和dy,那就是相对整个文本的位置定位的。
因为每个tspan都是单独的元素,除了定位之外,你还可以在给tspan里面的文本添加样式。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan dx="50,10,10,0,5" dy="50,10,10,10" fill="red">SVG 2</tspan>
</text>
</svg>
这里我给SVG 2添加了一个红色的填充,默认填充是黑色。把它当成一个普通的span,唯一的不同就是它只能在<text>元素中使用。
你可以直接在另一个tspan下方放置另一个tspan,通过给它们相同的x值,然后给第二个tspan一个dy值。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80">
<tspan>SVG 1</tspan>
<tspan x="280" dy="24" fill="red">SVG 2</tspan>
</text>
</svg>
这里我设置的第二个tspan的x属性值和text元素相同,然后再设置了24的dy值,这样它就显示在第一个tspan下方了。
注意:除了dy,也可以使用y来进行设置。
我们上周看的所有可以应用于text的属性都可以用于tspan。但是,有一件需要注意的事情是,所有设置给text元素的属性都会传播到tspan元素中。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan>SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>
这里我把text元素旋转了10度,你可以看到所有tspan中的内容也都旋转了10度,但是我没有明确地给tspan设置旋转。
这并不奇怪,如果你想让第一个tspan的内容正常显示,不要额外给它设置旋转-10。如果设置了就会变成下面这样。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan rotate="-10">SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>
给tspan的rotate属性,会覆盖掉我们原来给text设置的rotate。
如果你想让它正常直立起来,直接给tspan设置rotate="0"即可。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan rotate="0">SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>
这样第一个tspan的内容就直立了。
总结
SVG的tspan元素,功能上类似于普通的HTMLspan元素。通过包裹成一个tspan,你可以对这部分文本进行操作,添加样式、定位,它和其它文本是独立开来的。
所有text元素可用的属性,tspan也都可以用,如fill和stroke,还有很多其它的属性。
所有你给text元素应用的属性,都会传播到tspan元素中。如果你不希望继承某个属性值,你可以在tspan中给它设置新的值,覆盖掉原来text元素中的值。
你可以把<tspan>元素当成SVG文本的span。你可以用<tspan>来包裹SVG文本,来对它们做整体控制,关于显示和定位,文本片段之间的相互关系等。
我们从一个简单的示例开始。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG</tspan>
<tspan>SVG</tspan>
</text>
</svg>
这里大多数的代码对你来说应该是熟悉的,在阅读了前面两篇文章之后。我创建了一个<svg>元素,定义了SVG视窗的尺寸,添加了一个红色的边框,这样我们可以看到它的边界。我还把font-size设置为2em,以及overflow: visible;,这样我们可以看到视窗之外的内容。
我在(240,120)的位置放置了一个text元素,里边有两个tspan,每个都包含了内容为SVG的文本。效果如下:
tspan中的文本按照内联顺序排列,和它们直接在text元素中显示的一样,中间有个空格。
有一点非常有趣的是,可以给<text>元素添加的属性也都可以添加给<tspan>元素。
我们来改变一下第二个tspan的位置,通过设置x和y坐标。这样我们可以把两个tspan分开。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan x="10" y="10">SVG 2</tspan>
</text>
</svg>
我把第二个tspan移到了(10,10)的位置。因为x和y都是绝对定位,SVG 2的位置就移到了视窗的左边缘,也就是上边缘的下方。
你可能记得上一篇文章中我们提到了y坐标表示的是基线的位置,不是文本的顶部或底部,而是在中间的一个位置。
为了相对定位,我们可以在下面的实例中使用dx和dy来定位。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan dx="50,10,10,0,5" dy="50,10,10,10">SVG 2</tspan>
</text>
</svg>
这里我在第二个tspan中使用了dy坐标列,这样每个字符都是相对于前一个字符定位的。
对于上面的第一个字符“S”,如果没有给定dx和dy,那就是相对整个文本的位置定位的。
因为每个tspan都是单独的元素,除了定位之外,你还可以在给tspan里面的文本添加样式。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan dx="50,10,10,0,5" dy="50,10,10,10" fill="red">SVG 2</tspan>
</text>
</svg>
这里我给SVG 2添加了一个红色的填充,默认填充是黑色。把它当成一个普通的span,唯一的不同就是它只能在<text>元素中使用。
你可以直接在另一个tspan下方放置另一个tspan,通过给它们相同的x值,然后给第二个tspan一个dy值。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80">
<tspan>SVG 1</tspan>
<tspan x="280" dy="24" fill="red">SVG 2</tspan>
</text>
</svg>
这里我设置的第二个tspan的x属性值和text元素相同,然后再设置了24的dy值,这样它就显示在第一个tspan下方了。
注意:除了dy,也可以使用y来进行设置。
我们上周看的所有可以应用于text的属性都可以用于tspan。但是,有一件需要注意的事情是,所有设置给text元素的属性都会传播到tspan元素中。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan>SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>
这里我把text元素旋转了10度,你可以看到所有tspan中的内容也都旋转了10度,但是我没有明确地给tspan设置旋转。
这并不奇怪,如果你想让第一个tspan的内容正常显示,不要额外给它设置旋转-10。如果设置了就会变成下面这样。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan rotate="-10">SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>
给tspan的rotate属性,会覆盖掉我们原来给text设置的rotate。
如果你想让它正常直立起来,直接给tspan设置rotate="0"即可。
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan rotate="0">SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>
这样第一个tspan的内容就直立了。
总结
SVG的tspan元素,功能上类似于普通的HTMLspan元素。通过包裹成一个tspan,你可以对这部分文本进行操作,添加样式、定位,它和其它文本是独立开来的。
所有text元素可用的属性,tspan也都可以用,如fill和stroke,还有很多其它的属性。
所有你给text元素应用的属性,都会传播到tspan元素中。如果你不希望继承某个属性值,你可以在tspan中给它设置新的值,覆盖掉原来text元素中的值。
0 0
- 如何使用tspan元素给SVG文本添加样式、定位
- 使用tspan元素给SVG文本添加样式、定位
- JS给元素添加样式
- 给元素添加边框样式
- 用CSS给SVG <use>的内容添加样式
- React给添加元素增加样式
- angular js 给元素添加样式和移除样式
- 使用CSS来设置SVG中Use元素的样式
- 使用CSS来设置SVG中Use元素的样式
- 使用OpenXml SDK 给Word文档添加样式并应用于文本
- 后台cs文件中给元素控件添加样式
- 使用js给元素添加事件
- SVG ICON 添加使用
- 元素添加样式
- 给文本添加行号
- Jquery动态生成的html元素,然后给其中的元素添加样式
- SVG标记元素的使用
- html5 svg 中元素点击事件添加
- 判断前台获取的字符串是否为正整数
- unix2
- Head联动RecyclerView
- android Java 打印堆栈的几种方法
- 3D Math Primer for Graphics and Game Development Second Edition
- 使用tspan元素给SVG文本添加样式、定位
- cocos2d-x中ccui.checkbox的使用方法
- JSP中文乱码
- pandas排序与统计
- java 实现监听器简例 listener
- visio调整画布大小和画大括号
- 注解学习:实现简单的junit的@test注解
- lscpu
- 关于如何html如何读取后台缓存数据