svg入门学习回顾

时间 2019-11-17

标签 svg 入门学习回顾繁體版

原文原文链接

  0 参考连接：阮一峰SVG图像入门教程

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>svg</title>
  6         <style type="text/css">
  7             body{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             .red{
 12                 fill: red;
 13             }
 14             .fancy{
 15                 fill: none;
 16                 stroke: black;
 17                 stroke-width: 3pt;
 18             }
 19         </style>
 20     </head>
 21     <body>
 22         <!-- viewBox(起点x坐标,起点y坐标,视口宽，视口高) -->
 23         <!-- <svg width="1000" height="1000" viewBox="0 0 500 500" style="background: pink;">
 24           <circle id="mycircle" cx="50" cy="50" r="50" />
 25         </svg> -->
 26         
 27         <!-- 画圆circle-->
 28         <!-- <svg width="300" height="180">
 29           <circle cx="30"  cy="50" r="25" />
 30           <circle cx="90"  cy="50" r="25" class="red" />
 31           <circle cx="150" cy="50" r="25" class="fancy" />
 32         </svg> -->
 33         
 34         <!-- 直线line -->
 35         <!-- <svg width="300" height="180">
 36           <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
 37         </svg> -->
 38         
 39         <!-- polyline折线 -->
 40         <!-- <svg width="100" height="100">
 41             <polyline points="3,3 30,28 3,53" fill="none" stroke="black"></polyline>
 42         </svg> -->
 43         
 44         <!-- 绘制rect矩形 -->
 45         <!-- <svg width="300" height="180">
 46           <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
 47         </svg> -->
 48         
 49         <!-- 绘制椭圆ellipse cx,cy中心坐标 rx横向轴半径 ry纵向轴半径 -->
 50         <!-- <svg width="300" height="180">
 51           <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
 52         </svg> -->
 53         
 54         <!-- 绘制多边形polygon points点坐标集合 -->
 55         <!-- <svg width="300" height="180" style="background: red;">
 56           <polygon 
　　　　　　　　　　fill="green" 
　　　　　　　　　　stroke="orange" 
　　　　　　　　　　stroke-width="1" 
　　　　　　　　　　points="18,3 46,3 46,40 61,40 32,68 3,40 18,40"/>
 57         </svg> -->
 58         
 59         <!-- 制路径path  M起点 l通过点 z终点-->
 60         <!-- <svg width="300" height="180">
 61             <path d="
 62               M 18,3
 63               L 46,3
 64               L 46,40
 65               L 61,40
 66               L 32,68
 67               L 3,40
 68               L 18,40
 69               Z
 70             "></path>
 71         </svg> -->
 72         
 73         <!-- 文本text -->
 74         <!-- <svg width="300" height="180">
 75           <text x="50" y="25">Hello World</text>
 76         </svg> -->
 77         
 78         <!-- 复制形状use -->
 79         <!-- <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
 80           <circle id="myCircle" cx="5" cy="5" r="4"/>
 81 
 82           <use href="#myCircle" x="10" y="0" fill="blue" />
 83           <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
 84         </svg> -->
 85         
 86         <!-- 分组g -->
 87         <!-- <svg width="300" height="100">
 88           <g id="myCircle">
 89             <text x="25" y="20">圆形</text>
 90             <circle cx="50" cy="50" r="20"/>
 91           </g>
 92 
 93           <use href="#myCircle" x="100" y="0" fill="blue" />
 94           <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
 95         </svg> -->
 96         
 97         <!-- defs自定义形状 仅供引用 -->
 98         <!-- <svg width="300" height="100">
 99           <defs>
100             <g id="myCircle">
101               <text x="25" y="20">圆形</text>
102               <circle cx="50" cy="50" r="20"/>
103             </g>
104           </defs>
105 
106           <use href="#myCircle" x="0" y="0" />
107           <use href="#myCircle" x="100" y="0" fill="blue" />
108           <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
109         </svg> -->
110         
111         <!-- patten自定义形状 <pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示
112　　　　　　　　<pattern>的宽度和长度是实际的像素值。而后，指定这个模式去填充下面的矩形。 -->
113         <!-- <svg width="500" height="500">
114           <defs>
115             <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
116               <circle fill="#bee9e8" cx="50" cy="50" r="35" />
117             </pattern>
118           </defs>
119           <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
120         </svg> -->
121         
122         <!-- image图片 -->
123         <!-- <svg viewBox="0 0 100 100" width="100" height="100" style="background: red;">
124           <image xlink:href="https://picsum.photos/250?image=9"width="50%" height="50%"/>
125         </svg> -->
126         
127         <!-- animate动画 
128             attributeName：发生动画效果的属性名。
129             from：单次动画的初始值。
130             to：单次动画的结束值。
131             dur：单次动画的持续时间。
132             repeatCount：动画的循环模式。
133         -->
134         <!-- <svg width="500px" height="500px">
135           <rect x="0" y="0" width="100" height="100" fill="#feac5e">
136             <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
137             <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
138           </rect>
139         </svg> -->
140         
141         <!-- animateTransform transform <animateTransform>的效果为旋转（rotate），
142             这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。
143             from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，
144             角度为360，围绕(400, 400)旋转。
145         -->
146         <!-- <svg width="500px" height="500px">
147           <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
148             <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="1" />
149           </rect>
150         </svg> -->
151         
152         <!-- svg js操做 -->
153         <!-- <svg
154           id="mysvg"
155           xmlns="http://www.w3.org/2000/svg"
156           viewBox="0 0 800 600"
157           preserveAspectRatio="xMidYMid meet"
158         >
159           <circle id="mycircle" cx="400" cy="300" r="50" />
160         <svg>
161             
162         <script type="text/javascript">
163             let mycircle = document.getElementById('mycircle');
164             console.log(111111, mycircle)
165             mycircle.addEventListener('click', function(e){
166                 console.log('circle clicked - enlarging');
167                 mycircle.setAttribute('r', 20);
168             },false)
169         </script> -->
170         
171         <!-- 获取svg dom 使用<object>、<iframe>、<embed>标签插入 SVG 文件，能够获取 SVG DOM。
172         !!!注意，若是使用<img>标签插入 SVG 文件，就没法获取 SVG DOM。 -->
173         <!-- var svgObject = document.getElementById('object').contentDocument;
174         var svgIframe = document.getElementById('iframe').contentDocument;
175         var svgEmbed = document.getElementById('embed').getSVGDocument(); -->
176         
177         <!-- 读取svg源码 -->
178         <!-- <div id="svg-container">
179           <svg
180             xmlns="http://www.w3.org/2000/svg"
181             xmlns:xlink="http://www.w3.org/1999/xlink"
182             xml:space="preserve" width="500" height="440"
183           >
184             <rect x="0" y="0" width="100" height="100" fill="#feac5e">
185                 <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
186                 <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
187             </rect>
188           </svg>
189         </div>
190         <script type="text/javascript">
191             let svg = document.querySelector('svg')
192             
193             // 使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
194             let svgString = new XMLSerializer().serializeToString(svg);
195             
196             svg.addEventListener('click', function(e){
197                 console.log(svgString);
198             })
199         </script> -->
200         
201         <!-- svg图像转换为canvas图像 -->
202         <!-- <script type="text/javascript">
203             首先新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
204             var img = new Image();
205             var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
206             
207             var DOMURL = self.URL || self.webkitURL || self;
208             var url = DOMURL.createObjectURL(svg);
209             
210             img.src = url;
211             
212             而后当图像加载完成后，再将它绘制到<canvas>元素。
213             img.onload = function () {
214               var canvas = document.getElementById('canvas');
215               var ctx = canvas.getContext('2d');
216               ctx.drawImage(img, 0, 0);
217             };
218         </script> -->
219         
220     </body>
221 </html>

1. SVG animation 回顾
2. JVM学习回顾
3. android学习回顾
4. 机器学习入门——线性代数简单回顾
5. SVG入门
6. Hadoop学习回顾之MapReduce
7. 8-1学习回顾
8. java学习知识回顾
9. Jdbc的学习回顾（一）
10. 学习回顾与展望
更多相关文章...
• Memcached入门教程 - NoSQL教程
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• YAML 入门教程
• Tomcat学习笔记（史上最全tomcat学习笔记）