html显示svg,html中svg定义的图形是什么格式
它与SVG canvas中的一样，使用标准的HTML/CSS颜色表示方法。这些颜色可用于填充和描边属性。基本有下面这些定义颜色的方式:
1.颜色名称：直接使用红色、蓝色、黑色的颜色名称。
2.rgba/rgb值：这个也很好理解，比如#ff0000，rgba(255，100，100，0.5)。
3.十六进制值：以十六进制定义的颜色，例如#ffffff。
4.渐变值：这个和canvas一样，支持两种渐变：线性渐变和圆形渐变。如下图所示：
5.图案填充：使用自定义图案作为填充颜色。
前面的都很简单。让我们集中在后面两个填充颜色。
线性渐变linear gradient可以用线性渐变元素定义，每个渐变分量用stop元素定义。看下面这个例子：复制代码代码如下：
svg宽度=120 高度=240
面数
线性梯度id=梯度1
stop class=stop1 offset=0%/
stop class=stop2 offset=50%/
stop class= stop 3 offset= 100% /
/线性梯度
linear gradient id= gradient 2 x1= 0 x2= 0 y1= 0 y2= 1
停止偏移=0% 停止-颜色=红色/
光圈偏移量=50% 光圈颜色=黑色光圈不透明度=0/
停止偏移=100% 停止-颜色=蓝色/
/线性梯度
style type=text/css ！[CDATA[
# rect 1 { fill:URL(# gradient 1)；}
. stop1 { stop-color:红色；}
. stop2 { stop-color:黑色；停止-不透明度：0；}
. stop3 { stop-color:蓝色；}
]]
/风格
/defs
rect id= rect 1 x= 10 y= 10 rx= 15 ry= 15 width= 100 height= 100 /
rect x= 10 y= 120 rx= 15 ry= 15 width= 100 height= 100 fill= URL(# gradient 2)/
/svg在这个例子中，我们需要注意:
1.渐变元素必须放在defs元素中；
2.需要为渐变元素设置id值，否则其他元素无法使用这个渐变。
3.渐变的成员由stop定义，其属性也可以由CSS定义；它支持标准HTML所支持的属性，如class和id。其它常用属性如下:offset属性：这个定义了这个成员颜色的范围，这个属性的取值范围是0%到100%(或者0到1)；通常情况下，第一种颜色设置为0%，最后一种颜色设置为100%。stop-color属性：这个非常简单，定义了这个成员颜色的颜色。stop-opacity属性：定义成员颜色的透明度。x1,y1,x2,y2属性：这两点定义了渐变的方向。如果默认不写，就是水平渐变。在上面的例子中，还创建了一个垂直渐变。
4.渐变的使用，如示例所示，可以直接以url(#id)的形式分配给填充或描边。
5.渐变成员的重用：也可以使用xlink:href来引用已定义的渐变成员，所以上面的例子也可以改写如下：复制代码code如下：
线性梯度id=梯度1
stop class=stop1 offset=0%/
stop class=stop2 offset=50%/
stop class= stop 3 offset= 100% /
/线性梯度
linear gradient ID= gradient 2 x1= 0 x2= 0 y1= 0 y2= 1 xlink:href= # gradient 1 /环形渐变使用radialGradient元素定义圆形渐变，或使用stop定义成员颜色。请看示例：复制如下代码：
svg宽度=120 高度=240
面数
径向梯度id=梯度3
停止偏移=0% 停止-颜色=红色/
停止偏移=100% 停止-颜色=蓝色/
/radialGradient
径向梯度id=梯度4 cx=0.25 cy=0.25 r=0.25
停止偏移=0% 停止-颜色=红色/
停止偏移=100% 停止-颜色=蓝色/
/radialGradient
/defs
rect x= 10 y= 10 rx= 15 ry= 15 width= 100 height= 100 fill= URL(# gradient 3)/
rect x= 10 y= 120 rx= 15 ry= 15 width= 100 height= 100 fill= URL(# gradient 4)/
/svg
从上面的例子我们可以看到，除了元素名和一些特殊的成员，其他的都和线性渐变一样，包括stop的定义，必须放入defs，必须给它一个id，用url(#id)赋值等等。这些特殊成员如下：offset属性：这个和线性渐变的值一样，但是意义不同。在圆形渐变中，0%代表圆心，很好理解。cx,cy,r属性：其实也很好理解。当然，圆形梯度必须定义环的中心和半径。你可以通过体验上面例子中圆圈的大小和位置来理解。fx,fy属性：定义颜色中心(焦点)的位置，即最粗渐变的坐标。在上面的例子中，最红的红色是圆心，这是默认效果；如果你想改变它，你可以设置FX和FY坐标值。
但是，你需要注意上面的CX，CY，R，FX，FY的值。你会发现都是小数，那么单位是什么呢？
这就需要先知道另一个相关的属性：gradientUnits，它定义了用来定义渐变的坐标单位。该属性有两个可用值：userSpaceOnUse和objectBoundingBox。
objectBoundingBox是默认值，它使用的坐标都是相对于对象包围盒(方形包围盒，如果不是方形包围盒，就比较复杂，可以跳过)，取值范围是0到1。例如，上面示例中CX和Cy的坐标值(0.25，0.25)。这意味着圆心在边界框的左上四分之一处，半径为0.25意味着半径长度为对象正方形边界框的1/4，如图所示。userSpaceOnUse表示使用绝对坐标。使用此设置时，必须确保渐变和填充对象保持在一个位置。
查看以下示例，注意gradientUnits属性的默认值是objectBoundingBox:复制代码如下：
svg宽度=120 高度=120
面数
径向梯度id=梯度5
CX= 0.5 cy= 0.5 r= 0.5 FX= 0.25 fy= 0.25
停止偏移=0% 停止-颜色=红色/
停止偏移=100% 停止-颜色=蓝色/
/radialGradient
/defs
rect x= 10 y= 10 rx= 15 ry= 15 width= 100 height= 100
fill= URL(# gradient 5) stroke= black stroke-width= 2 /
circle CX= 60 cy= 60 r= 50 fill=透明 stroke=白色 stroke-width=2/
圆圈cx=35 cy=35 r=2 填充=白色笔划=白色/
圆圈cx=60 cy=60 r=2 填充=白色笔划=白色/
text x= 38 y= 40 fill= white font-family= sans-serif font-size= 10pt (FX，fy)/text
text x= 63 y= 63 fill= white font-family= sans-serif font-size=" 10pt "(CX，cy)/text
/svg
看效果图看‘聚焦’的意思。
另外还有渐变元素和一些变换属性，比如gradientTransform。这不是这里的重点，后面会总结转化。
另一个可以使用的属性是spreadMethod属性，它定义了当渐变到达其终点时应该采取的行为。该属性有三个可选值：填充(默认值)、反射、重复。pad就不用说了，自然过渡。渐变结束后，使用最后一个成员颜色直接渲染对象的其余部分。Refect将让渐变继续，但渐变将继续反向渲染，从最后一种颜色到第一种颜色。等到再次到达渐变的末端，然后反转顺序，这样就填充了引导线对象。重复也会让渐变继续渲染，但不会逆序，从第一种颜色到最后一种颜色反复渲染。效果如下：
查看重复呈现的代码：如下复制代码：
svg宽度=220 高度=220
面数
radialGradient id=渐变
CX= 0.5 cy= 0.5 r= 0.25 FX=. 25 fy=. 25
spreadMethod=repeat
停止偏移=0% 停止-颜色=红色/
停止偏移=100% 停止-颜色=蓝色/
/radialGradient
/defs
rect x= 50 y= 50 rx= 15 ry= 15 width= 100 height= 100
fill=url(#Gradient)/
/svg
纹理填充纹理填充也是一种流行的填充方式。在SVG中，您可以使用pattern创建纹理，然后使用该图案填充其他对象。直接看例子：复制代码如下：
svg宽度=200 高度=200
面数
线性梯度id=梯度6
停止偏移=0% 停止-颜色=白色/
停止偏移=100% 停止-颜色=蓝色/
/线性梯度
线性梯度id= gradient 7 x1= 0 x2= 0 y1= 0 y2= 1
停止偏移=0% 停止-颜色=红色/
停止偏移=100% 停止-颜色=橙色/
/线性梯度
/defs
面数
模式id=模式 x= .05 y= .05 宽度=. 25 高度=. 25
rect x= 0 y= 0 width= 50 height= 50 fill= sky blue /
rect x= 0 y= 0 width= 25 height= 25 fill= URL(# gradient 7)/
circle CX= 25 cy= 25 r= 20 fill= URL(# gradient 6) fill-opacity= 0.5 /
/模式
/defs
rect fill= URL(# Pattern) stroke= black x= 0 y= 0 width= 200 height= 200 /
/svg
这个例子看起来很简单，通过渐变创建图案，然后使用图案。
填充矩形。这里应该注意：
1.不同的浏览器在填充这种图案的时候会有不同的效果。
例如，这个例子在FireFix和Chrome中是一样的。但是如果你用渐变色
和模式定义在同一个defs组合中，FireFox仍然可以正常呈现，
但是Chrome无法识别渐变颜色，只能用默认的黑色填充。
2.模式也需要定义id。
3.模式也必须在defs中定义。
4.模式还用于直接分配要填充或描边的url(#id)。
以上都很简单。让我们关注例子中的坐标表示。坐标的模式更复杂。
模式包含两个相关的属性：patternUnits和patternContentUnits属性；这两个属性的值仍然只有两个：objectBoundingBox和userSpaceOnUse。上面已经提到了这两个值的含义。这里比较混乱的是，这两个属性的默认值是不一样的，但是当你明白这样做的原因后，你会发现真的很有道理。
1.patternUnits属性
该属性与渐变的gradientUnits属性相同，默认为objectBoundingBox。受此属性影响的属性有x、y、宽度和高度。这四个属性分别定义了图案的起点、宽度和高度。两者都采用相对值。在示例中，我们希望在水平和垂直方向上填充它们四次，因此宽度和高度都设置为0.25。
2.patternContentUnits属性
这个属性的缺省值正好相反，使用userSpaceOnUse。此属性描述在图案中绘制的形状的坐标系(如上面的rect、circle)。也就是说，默认情况下，你在pattern中绘制的形状和pattern本身的大小/位置使用不同的坐标系。考虑上面例子中的情况。我们要填充一个200*200的矩形，每个方向重复4次。这意味着每个图案都是50*50，所以在这个50*50的矩形中画出了图案中的两个矩形和一个圆。这样，我们就可以理解上图中矩形和圆形的坐标了。另外，为了居中，这个例子中的图案在渲染之前需要偏移10px，这个值受到patternUnits属性的限制，所以默认情况下，x和y的值是：10/200=0.05。
那么为什么pattern要这样设置两个属性的默认值呢？
这是由用户的使用情况决定的(用上面的例子讨论):第一种pattern样式:我觉得这是大多数情况，所以作为默认值处理：pattern会随着外部图形的缩放而拉伸。无论外围的正方形有多大，图案总是在两个方向上被填充4次。但是，图案中包含的图形不会随着外部填充的正方形的缩放而拉伸。很牵强，但我们这么理解吧。第二种pattern样式:图案中的形状也会随着外围形状的缩放而拉伸。我们可以展示patternContentUnits属性的值也被设置为objectBoundingBox来实现这种效果。例如，按如下方式修改pattern的部分：按如下方式复制代码：
Pattern id= Pattern width=. 25 height=. 25 patternContentUnits= objectBoundingBox
rect x= 0 y= 0 width=. 25 height=. 25 fill= sky blue /
rect x= 0 y= 0 width= . 125 height= . 125 fill= URL(# gradient 2)/
circle CX= . 125 cy= . 125 r= . 1 fill= URL(# gradient 1) fill-opacity= 0.5 /
/模式
修改后，当填充矩形的尺寸改变时，图案中的形状也会被拉伸。而且修改后改为相对外围物体的坐标，所以不再需要pattern的X和Y坐标。图案将始终被调整以适合填充的形状。第三种pattern的样式:图案的形状和大小是固定的。无论外围对象如何缩放，都可以将坐标系改为userSpaceOnUse来达到这个效果。代码如下：复制代码。代码如下：
模式id=模式 x=10 y=10 宽度=50 高度=50 模式单位=用户空间使用
rect x= 0 y= 0 width= 50 height= 50 fill= sky blue /
rect x= 0 y= 0 width= 25 height= 25 fill= URL(# gradient 2)/
circle CX= 25 cy= 25 r= 20 fill= URL(# gradient 1) fill-opacity= 0.5 /
/模式
下图显示了3中的典型模式：
实用参考：
官方文件：http://www.w3.org/TR/SVG11/
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs . 85)。文件
开发中心：https://developer.mozilla.org/en/SVG
大众参考：http://www.chinasvg.com/
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。