SVG XML 格式定义图形入门先容

SVG

SVG means Scalable Vector Graphics.

• SVG 使用 XML 格式定义图形
  
• SVG 图像在放大或改变尺寸的环境下其图形质量不会有所丧失
  
• SVG 是万维网联盟的标准
  

Hello World

• Use SVG in html
  

                and you can see:
  

• Link to the SVG file
  You can use  tag to link to the svg file, like this:
  

1. <a target="_blank" href="https://www.cnblogs.com/rect.svg">rect.svg</a>

复制代码

rect.svg
Shape

There some pre-shapes:

• 矩形
  
• 圆形
  
• 椭圆
  
• 线
  
• 折线
  
• 多边形
  
• 路径
  

Rect

                    

Line

                    

Polygon

the fill-rule
               

Polyline

   

Path

Some Commands
所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

1. M = moveto
2. L = lineto
3. H = horizontal lineto
4. V = vertical lineto
5. C = curveto
6. S = smooth curveto
7. Q = quadratic Bézier curve
8. T = smooth quadratic Bézier curveto
9. A = elliptical Arc
10. Z = closepath

复制代码

               Text

text zh_CN

• Common text
  

          Hello SVG      Hello SVG

• Rotate
  

rotate( [ ])
          Hello SVG      Hello SVG

• Text with path
  

                                       I love SVG I love SVG         




I love SVG I love SVG

• 
  

元素可以安排任何分小组与元素的数量
  Several lines:    First line    Second line    Several lines:    First line    Second line  Stroke

• Stroke 属性定义一条线，文本或元素表面颜色
  

g元素这样的将多个元素组织在一起的元素
                                

• stroke-width 属性定义了一条线，文本或元素表面厚度
  

                                      

• stroke-linecap 属性定义不同类型的开放路径的终结
  

                                            

• stroke-dasharray 创建不同的虚线
  

                                
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。