HTML5之SVG 2D新手入门3—文字与图象及3D渲染文字详

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

SVG中3D渲染文字

SVG的强劲工作能力之1是它能够将文字操纵到规范HTML网页页面不能能有的水平,而不必求助图象或其它软件。任何能够在样子或相对路径上实行的实际操作(如绘图或滤镜)都可以以在文字上实行。虽然SVG的文字3D渲染这般强劲,可是還是有1个不够的地方:SVG不可以实行全自动换行。假如文字比容许室内空间长,则简易地将它断开。大部分状况下,建立多写作本必须好几个文字元素。
另外,可使用 tspan 元素能够将文字元素分为几一部分,容许每一部分有各有的款式。

也有,在text元素中,空格的解决与HTML相近:换行和回车变为空格,而好几个空格缩小成单独空格。

立即显示信息在照片中的文字 - text元素
立即显示信息文字,可使用text元素,事例以下:

拷贝编码
编码以下:

<svg>
<rect width="300" height="200" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

如上面的事例中所示,text元素能够设定以下的特性:

x,y是文字部位座标。text-anchor是文字显示信息的方位,实际上也便是部位(x,y)处在文字的部位。这个特性有start,middle和end3种值。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元素的强力填补;它用于3D渲染1个区段内的文字;它只能出現在text元素或tspan元素的子元素中。典型的用法便是强调显示信息一部分文字。比如:

拷贝编码
编码以下:

<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>

tspan元素有以下的特性能够设定:x,y用于设定包括的文字的肯定座标值,这个值会遮盖默认设置的文字部位。这些特性能够包括1系列数据,这些数据会运用到每一个对应的单独标识符。沒有对应设定的标识符会紧跟前1个标识符。比如:

拷贝编码
编码以下:

<text x="10" y="10">Hello World!
<tspan x="100 200 300" font-weight="bold" fill="red">This is bold and red</tspan>
</text>

dx,dy用于设定包括的文字相对默认设置的文字部位的偏位量。这些特性一样能够包括1系列数据,每一个都会运用到对应的标识符。沒有对应设定的标识符会紧跟前1个标识符。你能够把上面的事例中的x换为dx看看实际效果。rotate用于设定字体样式的转动角度。这个特性页能够包括1系列数据,运用到每一个标识符。沒有对应设定的标识符会应用最终设定的那个数据。 

拷贝编码
编码以下:

<text x="10" y="10">Hello World!
<tspan rotate="10 20 45" font-weight="bold" fill="red">This is bold and red</tspan>
</text>

textLength:这是最让人难以相信的特性,听说设定完之后,3D渲染发现文字的长度与这个值不1致时,会以这个长度为准。可是我沒有试出来实际效果。

文字引入 - tref元素
这个元素容许引入界定过的文字,并高效率的复制到当今部位,一般相互配合xlink:href特定目地元素。由于是复制过来的,因此应用css改动当今文字的情况下,不容易改动原先的文字。看事例:

拷贝编码
编码以下:

<text id="example">This is an example text.</text>
<text>
<tref xlink:href="#example" />
</text>
 
文字相对路径 - textPath元素
这个较为成心思,实际效果也很酷,能做出许多的造型艺术实际效果;这个元素从它的xlink:href特性获得特定的相对路径并把文字对齐到这个相对路径上,看事例:

拷贝编码
编码以下:

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
<textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>

SVG中3D渲染照片 - image元素
SVG中的image元素能够立即适用显示信息光纤传感器照片,应用很简易。看下面的事例:

拷贝编码
编码以下:

<svg width="5cm" height="4cm">
<image xlink:href="Penguins.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

这里必须留意几点
1.假如沒有设定x或y座标,则默认设置是0。

2.假如沒有设定width或height,则默认设置也是0.

3.假如显式的设定width或height为0,则会严禁3D渲染这幅照片。

4.照片的文件格式适用png,jpeg,jpg,svg这些,因此svg是适用嵌套循环svg的。 

5.image与别的元素1样,是svg的基本元素,因此它适用全部的剪裁,蒙板,滤镜,转动等实际效果。

好用参照:
脚本制作数据库索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发设计管理中心:https://developer.mozilla.org/en/SVG
热门参照:http://www.chinasvg.com/
官方文本文档:http://www.w3.org/TR/SVG11/