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學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. SVG animation 回顧
- 2. JVM學習回顧
- 3. android學習回顧
- 4. 機器學習入門——線性代數簡單回顧
- 5. SVG入門
- 6. Hadoop學習回顧之MapReduce
- 7. 8-1學習回顧
- 8. java學習知識回顧
- 9. Jdbc的學習回顧（一）
- 10. 學習回顧與展望