`

突袭HTML5之SVG 2D入门3 - 文本与图像

    博客分类:
  • SVG
 
阅读更多

SVG中渲染文本

  SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处: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和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元素的子元素中。典型的用法就是强调显示部分文本。例如:

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

  tspan元素有下列的属性可以设置:

  • x,y用于设置包含的文本的绝对坐标值,这个值会覆盖默认的文本位置。这些属性可以包含一系列数字,这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。例如:
<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用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字,每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。你可以把上面的例子中的x换成dx看看效果。
  • rotate用于设置字体的旋转角度。这个属性页可以包含一系列数字,应用到每个字符。没有对应设置的字符会使用最后设置的那个数字。
<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:这是最令人费解的属性,据说设置完以后,渲染发现文本的长度与这个值不一致时,会以这个长度为准。但是我没有试出来效果。


  文本引用 - 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中渲染图片 - 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,则会禁止渲染这幅图片。

4.图片的格式支持png,jpeg,jpg,svg等等,所以svg是支持嵌套svg的。 

5.image与其他元素一样,是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/

分享到:
评论

相关推荐

    jaxb-svg11-1.0.2-API文档-中文版.zip

    赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...

    HTML5之SVG 2D入门3—文本与图像及渲染文本介绍

    SVG,全称Scalable Vector Graphics,是一种基于XML的二维矢量图形语言,它在HTML5中被广泛采用,提供了一种描绘复杂图形和文本的强大方式。SVG的一个关键优势在于其可缩放性,无论放大多少倍,图像都能保持清晰。在...

    svg-pan-zoom-master

    2. **事件监听与响应**:SVG-pan-zoom-master能够监听用户的交互事件,如鼠标点击、移动、双击、滚轮滚动等,并根据这些事件来更新SVG图像的位置和缩放级别。 3. **交互式界面**:插件支持动态更新SVG元素,这意味...

    jaxb-svg11-1.0.2-API文档-中英对照版.zip

    赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...

    如何使用vite-svg-loader

    "使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中,使用 SVG 图像已经成为一个非常常见的需求,特别是在 Vue 应用程序中。然而,引入 SVG 图像经常会遇到一些问题,例如图像大小问题、浏览器...

    svg-pan-zoom-master.rar

    SVG-pan-zoom库是专为JavaScript设计的一个工具,用于实现SVG图像的平移和缩放功能,使用户能够通过滚轮或鼠标拖动来查看图像的各个部分。 这个"svg-pan-zoom-master.rar"压缩包包含了SVG-pan-zoom库的源代码及其...

    react-native-qrcode-svg:基于react-native-svg和node-qrcode的React Native QR码生成器

    讨论: : 产品特点轻松渲染QR码图像(可选)嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...

    svg-explorer-extension-32bit-64bit-exe.zip

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许用户创建复杂的图形,包括线条、形状、渐变、文本等,且这些图形可以无限缩放而不失真。SVG在网页设计、图标制作、软件界面设计等领域广泛应用...

    save-ps-to-svg 1.0.zip

    在数字艺术与设计领域,Photoshop(简称PS)是一款广泛使用的图像处理软件,而SVG(Scalable Vector Graphics)则是一种基于XML的矢量图形格式,尤其适用于网页设计和需要缩放不失真的应用场景。本文将详细讲解如何...

    svg-css3-loading-icons-易语言.zip

    在"svg-css3-loading-icons-易语言.zip"这个压缩包中,我们可以推测包含的内容是关于如何使用SVG图标和CSS3技术来创建加载动画的示例或教程。易语言(E语言)是一种简洁、直观的中文编程语言,可能在这里是用来解释...

    react-svg-pan-zoom, 将平移和缩放特性添加到SVG的响应组件.zip

    react-svg-pan-zoom, 将平移和缩放特性添加到SVG的响应组件 react-svg-pan-zoom英镑react-svg-pan-zoom是一个反应组件,增加英镑pan和英镑的缩放特性,以英镑的SVG图像。 它有助于在小空间中显示大的SVG图像。 实时...

    save-ps-to-svg1.0.zip 让PS支持导出SVG

    关于SVG,它是一种与分辨率无关的图像格式,允许图像在放大或缩小时保持清晰,这对于网页设计、印刷和各种屏幕尺寸的设备非常理想。与位图(如JPEG或PNG)不同,SVG不包含像素,而是由数学公式定义的形状、线条和...

    svg-to-image, 在画布中,将SVG文本转换为可以绘制的图像.zip

    svg-to-image, 在画布中,将SVG文本转换为可以绘制的图像 svg-to-image 使用 Blob 和 URL.createObjectURL 将SVG字符串转换为 HTMLImageElement 。 返回到不支持的浏览器( 如 Safari 8.0 )的encodeURICompone

    html5-svg-shanche-animation.zip_html SVG_过山车

    在这个名为“html5-svg-shanche-animation”的项目中,开发者利用HTML5的SVG(可缩放矢量图形)特性,制作了一个生动的过山车动画。接下来,我们将深入探讨HTML5和SVG以及如何在实际应用中实现这样的动画效果。 ...

    svg-pan-zoom.js

    viewportSelector: '.svg-pan-zoom_viewport' , panEnabled: true , controlIconsEnabled: false , zoomEnabled: true , dblClickZoomEnabled: true , mouseWheelZoomEnabled: true , preventMouseEventsDefault: ...

    svg-css3-bike-running-易语言.zip

    本压缩包"svg-css3-bike-running-易语言.zip"(注意:实际文件名为.svg-css3-bike-running-易语言.rar)可能包含与使用SVG和CSS3来实现自行车运动动画相关的资源和代码示例。 SVG是一种基于XML的矢量图像格式,它...

    SVG2Vector-1.0.0-SVG编辑工具.jar.7z

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许用户创建和编辑图形,这些图形在放大或缩小时不会失真,因为它们是通过数学公式定义的,而不是像素网格。SVG2Vector-1.0.0-SVG编辑工具.jar.7z ...

    HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述

    位图与矢量图 以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力...

    NN-SVG-master.zip

    NN-SVG-master.zip是一个压缩包,包含了用于绘制神经网络架构的SVG图像的工具。这个工具特别之处在于它支持三种不同的神经网络模型的图形表示:全连接神经网络(FCNN)、LeNet以及AlexNet。这些模型在深度学习领域...

    HTML5之SVG 2D入门4—笔画与填充

    HTML5中的SVG(Scalable Vector Graphics)是一种用于创建2D图形的标准,它允许开发者以矢量图的方式绘制和操作图形。SVG的一个显著优势在于它的图形可以无损缩放,保持清晰度,非常适合用于网页设计和移动应用。在...

Global site tag (gtag.js) - Google Analytics