svg文字与图像

摘要：

　　svg与canvas一样都可以将文本和图像放在画布中，制作出不一样的效果。下面是如何使用svg来渲染文本与图像。

简介：

　　SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。

文本：

　　文本主要使用text元素，在text元素中，空格的处理与HTML类似：换行和回车变成空格，而多个空格压缩成单个空格。

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect width="300" height="100" style="fill:red;"/>
            <circle cx="150" cy="100" r="80" style="fill:green;"/>
            <text x="100" y="125" font-size="60" style="fill:white">SVG</text>
        </svg>

 

效果

注意：从图上也可以看出，svg中的元素是按照从上往下开始执行的，后者会覆盖前者，可以使用透明来处理。

参数详解：

• x,y是文本开始坐标。
• text-anchor是文本显示的方向，其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。start表示文本位置坐标(x,y)位于文本的开始处，文本从这点开始向右挨个显示。middle表示(x,y)位于文本中间处，文本向左右两个方向显示，其实就是居中显示。end表示(x,y)点位于文本结尾，文本向左挨个显示。
• fill,stroke：填充和描边颜色，建议类似与样式有关的写在style属性中，比如fill，font等。

使用tspan来强调重点：

　　这个元素是text元素的强力补充；它用于渲染一个区间内的文本；它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。例如：

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <text x="100" y="125" font-size="60" style="fill:green">
                <tspan font-weight="bold">测试</tspan>
                <tspan font-weight="bold" fill="red">svg</tspan>
            </text>
        </svg>

 

效果：

配置参数：

• x,y用于设置包含的文本的绝对坐标值，这个值会覆盖默认的文本位置。这些属性可以包含一系列数字，这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。
• dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字，每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。
• rotate用于设置字体的旋转角度

图像：

　　SVG中的image元素可以直接插入图片，如下：

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <image xlink:href="qq.png" x="10" y="10" height="50px" width="50px">
        </svg>

 

效果：

注意：

• 如果没有设置x或y坐标，则默认是0
• 如果显式的设置width或height为0，则会禁止渲染这幅图片。
• 如果没有设置width或height，则默认也是0
• 图片的格式支持png,jpeg,jpg,svg等等，所以svg是支持嵌套svg的。

 

 

附录：

SVG 元素：

元素	描述
a	定义超链接
altGlyph	允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字）
altGlyphDef	定义一系列象性符号的替换（例如，音乐符号或者亚洲文字）
altGlyphItem	定义一系列候选的象性符号的替换
animate	随时间动态改变属性
animateColor	规定随时间进行的颜色转换
animateMotion	使元素沿着动作路径移动
animateTransform	对元素进行动态的属性转换
circle	定义圆
clipPath
color-profile	规定颜色配置描述
cursor	定义独立于平台的光标
definition-src	定义单独的字体定义源
defs	被引用元素的容器
desc	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
ellipse	定义椭圆
feBlend	SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix	SVG 滤镜。应用matrix转换。
feComponentTransfer	SVG 滤镜。执行数据的 component-wise 重映射。
feComposite	SVG 滤镜。
feConvolveMatrix	SVG 滤镜。
feDiffuseLighting	SVG 滤镜。
feDisplacementMap	SVG 滤镜。
feDistantLight	SVG 滤镜。 Defines a light source
feFlood	SVG 滤镜。
feFuncA	SVG 滤镜。feComponentTransfer 的子元素。
feFuncB	SVG 滤镜。feComponentTransfer 的子元素。
feFuncG	SVG 滤镜。feComponentTransfer 的子元素。
feFuncR	SVG 滤镜。feComponentTransfer 的子元素。
feGaussianBlur	SVG 滤镜。对图像执行高斯模糊。
feImage	SVG 滤镜。
feMerge	SVG 滤镜。创建累积而上的图像。
feMergeNode	SVG 滤镜。feMerge的子元素。
feMorphology	SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。
feOffset	SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight	SVG 滤镜。
feSpecularLighting	SVG 滤镜。
feSpotLight	SVG 滤镜。
feTile	SVG 滤镜。
feTurbulence	SVG 滤镜。
filter	滤镜效果的容器。
font	定义字体。
font-face	描述某字体的特点。
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
g	用于把相关元素进行组合的容器元素。
glyph	为给定的象形符号定义图形。
glyphRef	定义要使用的可能的象形符号。
hkern
image
line	定义线条。
linearGradient	定义线性渐变。
marker
mask
metadata	规定元数据。
missing-glyph
mpath
path	定义路径。
pattern
polygon	定义由一系列连接的直线组成的封闭形状。
polyline	定义一系列连接的直线。
radialGradient	定义放射形的渐变。
rect	定义矩形。
script	脚本容器。（例如ECMAScript）
set	为指定持续时间的属性设置值
stop
style	可使样式表直接嵌入SVG内容内部。
svg	定义SVG文档片断。
switch
symbol
text
textPath
title	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
tref
tspan
use
view
vkern