HTML5学习笔记

 

（一）SVG（Scalable Vector Graphics）

使用：

1、使用

<svg width="200" height="200"> </svg>

2、画矩形

<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" /> 

3、画圆形

<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" /> 

4、旋转：

<svg width="200" height="200">
<g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</g>
</svg>

5、复用内容：

 1  <svg width="200" height="200">
 2        <defs>
 3           <g id="ShapeGroup">
 4             <rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
 5             <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
 6           </g>
 7        </defs>
 8        <use xlink:href="#ShapeGroup" transform="translate(60,0) rotate(30) scale(0.5)" />
 9        <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.4)" />
10        <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)" />
11        </svg>

6、图案与渐变：

 1 <svg width="400" height="400">
 2        <defs>
 3           <pattern id="GravelPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"
 4                    viewBox="0,0,100,67">
 5                    <image x="0" y="0" width="200" height="100" xlink:href="gravel.jpg"></image>
 6           </pattern>
 7           <linearGradient id="RedBlackGradient">
 8               <stop offset="0%" stop-color="#000"></stop>
 9               <stop offset="100%" stop-color="#F00"></stop>
10           </linearGradient>
11           
12        </defs>
13        <rect x="10" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" />
14        <circle cx="140" cy="200" r="120" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" />
15        </svg>

7、SVG路径

 1 <svg width="400" height="400">
 2           <g transform="translate(100,200)">
 3             <path d="M-25,-50
 4                      L-10,-80 
 5                      L-20,-80 
 6                      L-5,-110 
 7                      L-15,-110 
 8                      L0,-140 
 9                      L15,-110
10                      L5,-110
11                      L20,-80
12                      L10,-80
13                      L25,-50
14                      Z" fill="#0FF" stroke="#F00" ></path>
15            </g>
16 </svg>

8、SVG文本

1 <svg width="400" height="400">
2           <text x="10" y="80" stroke="#0FF" font-size="40px" font-weight="bold">Select this text!</text> 
3 </svg>

9、一个完整代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3    <head>
 4        <meta charset="utf-8" >
 5        <title>Scalable Vector Graphics</title>
 6        <link rel="stylesheet" href="css/index.css" >
 7        <style>
 8            svg {border:1px solid black;}
 9        </style>
10    </head>
11    <body>
12        <h2>SVG</h2>
13        <hr>
14 
15        <svg width="400" height="600">
16           <defs>
17             <pattern id="GravelPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67"
18                      viewBox="0 0 100 67">
19                      <image x="0" y="0" width="100" height="100" xlink:href="gravel.jpg" />
20             </pattern>
21             <linearGradient id="TrunkGradient">
22                 <stop offset="0%" stop-color="#663300" />
23                 <stop offset="40%" stop-color="#996600" />
24                 <stop offset="100%" stop-color="#552200" />
25             </lineatGradient>
26 
27             <rect x="-5" y="-50" width="10" height="50" id="Trunk" />
28             <path d="M-25,-50
29                      L-10,-80
30                      L-20,-80
31                      L-5,-110
32                      L-15,-110
33                      L0,-140
34                      L15,-110
35                      L5,-110
36                      L20,-80
37                      L10,-80
38                      L25,-50
39                      Z" id="Canopy" />
40              <linearGradient id="CanopyShadow" x="0" y="0" x2="0" y2="100%">
41                  <stop offset="0%" stop-color="#000" stop-opacity="0.5" />
42                  <stop offset="20%" stop-color="#000" stop-opacity="0" />
43              </linearGradient>
44 
45              <g id="Tree">
46                  <use xlink:href="#Trunk" fill="url(#TrunkGradient)" />
47                  <use xlink:href="#Trunk" fill="url(#CanopyShadow)" />
48                  <use xlink:href="#Canopy" fill="none" stroke="#663300" 
49                       stroke-linejoin="round" stroke-width="4px" />
50                  <use xlink:href="#Canopy" fill="#339900" stroke="none" />
51              </g>
52              
53              <g id="TreeShadow">
54                  <use xlink:href="#Trunk" fill="#000" />
55                  <use xlink:href="#Canopy" fill="#000" stroke="none" />
56              </g>
57           </defs>
58           <g transform="translate(-10,350)" stroke-width="20" stroke="url(#GravelPattern)" 
59              stroke-linejoin="round" >
60              <path d="M0,0 Q170,-50 260,-190 Q310,-250 410,-250" fill="none" />
61           </g>
62           <text y="60" x="200" font-family="Microsoft YaHei" font-size="60px" fill="#996600" text-anchor="middle" >
63              Happy Trails!
64           </text>
65 
66           <use xlink:href="#TreeShadow" transform="translate(130,250) scale(1,0.6) skewX(-18)" opacity="0.4" />
67           <use xlink:href="#Tree" transform="translate(130,250)" />
68           <use xlink:href="#TreeShadow" transform="translate(260,500) scale(2,1.2) skewX(-18)" opacity="0.4" />
69           <use xlink:href="#Tree" transform="translate(260,500) scale(2)" />
70        </svg>
71    </body
72 </html>

 

 

 

 

posted @ 2012-11-20 20:18  china_victory  阅读(412)  评论(0)  编辑  收藏  举报