《Pro HTML5 Programming》
Chapter 3 code example;在官网下载里没有找到第三章SVG的code，所以自己写了一遍，就当练习，在此处记录一下代码：
1 <!DOCTYPE html> 2 <html> 3 <title>Happy Trails in SVG</title> 4 <style> 5 svg { 6 border: 1px solid black; 7 } 8 9 g[id=Tree]:hover { 10 opacity: 0.5; 11 cursor: crosshair; 12 } 13 </style> 14 15 <body> 16 <div> 17 <button id="AddTreeButton">Add Tree</button> 18 </div> 19 <svg width="400" height="600" xml:space="preserve"> 20 <defs> 21 <pattern id="GravelPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> 22 <image x="0" y="0" width=100 height=67 xlink:href="gravel.jpg"></image> 23 </pattern> 24 <linearGradient xmlns="http://www.w3.org/2000/svg" y2="0" x2="1" y1="1" x1="1" id="CanopyShadow"> 25 <stop offset="0" stop-color="#000" stop-opacity=".5"></stop> 26 <stop offset="0.2" stop-color="#000" stop-opacity="0"></stop> 27 </linearGradient> 28 <linearGradient xmlns="http://www.w3.org/2000/svg" y2="0" x2="1" y1="1" x1="1" id="TrunkGradient"> 29 <stop offset="0%" stop-color="#663300"></stop> 30 <stop offset="40%" stop-color="#996600"></stop> 31 <stop offset="100%" stop-color="#552200"></stop> 32 </linearGradient> 33 <rect x="-5" y="-50" width=10 height=50 id="Trunk"></rect> 34 <path id="Canopy" d="M-25,-50 35 L-10,-80 36 L-20,-80 37 L-5,-110 38 L-15,-110 39 L0,-140 40 L15,-110 41 L5,-110 42 L20,-80 43 L10,-80 44 L25,-50 45 Z"></path> 46 47 <g id="Tree"> 48 <use xlink:href="#Trunk" fill="url(#TrunkGradient)" stroke="none"></use> 49 <use xlink:href="#Trunk" fill="url(#CanopyShadow)" stroke="none"></use> 50 <use xlink:href="#Canopy" fill="none" stroke="#663300" stroke-linejoin="round" stroke-width="4px"></use> 51 <use xlink:href="#Canopy" fill="#339900" stroke="none"></use> 52 </g> 53 <g id="TreeShadow"> 54 <use xlink:href="#Trunk" fill="#000"></use> 55 <use xlink:href="#Canopy" fill="#000" stroke="none"></use> 56 </g> 57 </defs> 58 <g transform="translate(-10,350)" stroke-width="20" stroke="url(#GravelPattern)" stroke-linejoin="round"> 59 <path d="M0,0 Q170,-50 260,-190 Q310,-250 410,-250" fill="none"></path> 60 </g> 61 62 <text x=200 y=60 font-family="impact" font-size="60px" fill="#996600" text-anchor="middle"> 63 Happy Trails! 64 </text> 65 <text y=90 x=200 font-family="impact" font-size="20px" fill="#996600" text-anchor="middle" id="TreeCounter"> 66 </text> 67 <text y=420 x=20 font-family="impact" font-size="20px" fill="#996600" text-anchor="left"> 68 <tspan>You can remove a</tspan> 69 <tspan y=440 x=20>tree by clicking on it.</tspan> 70 </text> 71 72 <use xlink:href="#TreeShadow" transform="translate(130,250) scale(1,0.6) skewX(-18)" opacity="0.4"></use> 73 <use xlink:href="#Tree" transform="translate(130,250)"></use> 74 <use xlink:href="#TreeShadow" transform="translate(260,500) scale(2,1.2) skewX(-18)" opacity="0.4"></use> 75 <use xlink:href="#Tree" transform="translate(260,500) scale(2)"></use> 76 </svg> 77 <script> 78 document.getElementById("AddTreeButton").onclick = function () { 79 var x = Math.floor(Math.random() * 400); 80 var y = Math.floor(Math.random() * 600); 81 var scale = Math.random() + .5; 82 var translate = "translate(" + x + "," + y + ")"; 83 84 var tree = document.createElementNS("http://www.w3.org/2000/svg", "use"); 85 tree.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#Tree"); 86 tree.setAttribute("transform", translate + "scale(" + scale + ")"); 87 document.querySelector("svg").appendChild(tree); 88 updateTrees(); 89 }; 90 function updateTrees() { 91 var list = document.querySelectorAll("use"); 92 var treeCount = 0; 93 for (var i = 0; i < list.length; i++) { 94 if (list[i].getAttribute("xlink:href") == "#Tree") { 95 treeCount++; 96 list[i].onclick = removeTree; 97 } 98 } 99 var counter = document.getElementById("TreeCounter"); 100 counter.textContent = treeCount + " tree in the forest"; 101 } 102 function removeTree(e) { 103 var elt = e.target; 104 if (elt.correspondingUseElement) { 105 elt = elt.correspondingUseElement; 106 } 107 elt.parentNode.removeChild(elt); 108 updateTrees(); 109 } 110 </script> 111 </body> 112 </html>
关于渐变填充参考如下：
LinerGradient references: https://segmentfault.com/a/1190000009278935