SVG——新一代Web设计及互动媒体的革新

蓝骑士SVG教程:SVG基础 - 第四课 SVG文本(text)

文章索引
蓝骑士SVG教程:SVG基础
第一课 开始
第二课 SVG图像容器
第三课 SVG Path路径与图形
第四课 SVG文本(text)
第五课 SVG样式表(CSS)
第六课 SVG填充(fill)
第七课 SVG笔划(stroke)
第八课 SVG梯度(Gradients)
第九课 SVG滤镜
第十课 SVG和当前的标准网络图像(JPEG,GIF,PNG)
第十一课 SVG支持ICC色彩模式
第十二课 SVG打印
所有页面
  SVG文本物件有点类似于html中的文本元素,包括了字体,色彩等样式属性。但是由于它不像html中已经被固定,所以文本可以更加自由的由设计者或使用者来控制。



  上面的图像是一个控制文本的例子,请在下面的下拉菜单选择不同的字体和在文本框输入其他英文改变图像中的文字。

***附js2

   此外,SVG图像中使用的字体并不受到用户使用系统中安装字体的限制,这一点与html有很大差别。SVG将制作时使用到的特殊字符通过自定义字符集集 合到SVG文件中。这样,一方面可以正确显示字体,另一方面也不需用户下载其他无用的字符的字体,而是显示什么字符,下载相应的一小部分字符字体。

  下面的例子中已经植入了一种特殊字体。





 

将要更新