怎么使用HTML5中SVG2D文本与图像
这篇文章主要介绍“怎么使用HTML 5中SVG 2D文本与图像”,在日常操作中,相信很多人在怎么使用HTML 5中SVG 2D文本与图像问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用HTML 5中SVG 2D文本与图像”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
10年积累的网站设计制作、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有平乡免费网站建设让你可以放心的选择与我们合作。
SVG中渲染文本
SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行。如果文本比允许空间长,则简单地将它切断。多数情况下,创建多行文本需要多个文本元素。
此外,可以使用 tspan 元素可以将文本元素分成几部分,允许每部分有各自的样式。
还有,在text元素中,空格的处理与HTML类似:换行和回车变成空格,而多个空格压缩成单个空格。
直接显示在图片中的文本 - text元素
直接显示文本,可以使用text元素,例子如下:
如上面的例子中所示,text元素可以设置下列的属性:
x,y是文本位置坐标。
text-anchor是文本显示的方向,其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。
start表示文本位置坐标(x,y)位于文本的开始处,文本从这点开始向右挨个显示。
middle表示(x,y)位于文本中间处,文本向左右两个方向显示,其实就是居中显示。
end表示(x,y)点位于文本结尾,文本向左挨个显示。
除了这些属性,下面的这些属性都既可以在CSS中指定,也可以直接在属性中指定:
fill,stroke:填充和描边颜色,具体使用在后面总结。
font的相关属性:font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。
文本区间 - tspan元素
这个元素是text元素的强力补充;它用于渲染一个区间内的文本;它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。例如:
This is bold and red
tspan元素有下列的属性可以设置:
x,y用于设置包含的文本的绝对坐标值,这个值会覆盖默认的文本位置。这些属性可以包含一系列数字,这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。例如:
Hello World! This is bold and red
dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字,每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。你可以把上面的例子中的x换成dx看看效果。
rotate用于设置字体的旋转角度。这个属性页可以包含一系列数字,应用到每个字符。没有对应设置的字符会使用***设置的那个数字。
Hello World! This is bold and red
textLength:这是最令人费解的属性,据说设置完以后,渲染发现文本的长度与这个值不一致时,会以这个长度为准。但是我没有试出来效果。
文本引用 - tref元素
这个元素允许引用定义过的文本,并高效的拷贝到当前位置,通常配合xlink:href指定目的元素。因为是拷贝过来的,所以使用css修改当前文本的时候,不会修改原来的文本。看例子:
This is an example text.
文本路径 - textPath元素
这个比较有意思,效果也很酷,能做出很多的艺术效果;这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上,看例子:
This text follows a curve.
SVG中渲染图片 - image元素
SVG中的image元素可以直接支持显示光栅图片,使用很简单。看下面的例子:
这里需要注意几点:
1.如果没有设置x或y坐标,则默认是0。
2.如果没有设置width或height,则默认也是0.
3.如果显式的设置width或height为0,则会禁止渲染这幅图片。
4.图片的格式支持png,jpeg,jpg,svg等等,所以svg是支持嵌套svg的。
5.image与其他元素一样,是svg的常规元素,所以它支持所有的裁剪,蒙板,滤镜,旋转等效果。
到此,关于“怎么使用HTML 5中SVG 2D文本与图像”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站名称:怎么使用HTML5中SVG2D文本与图像
文章URL:http://scyanting.com/article/ihddoj.html