代码改变世界

Html5 Svg Chapter 3

2018-01-08 17:20  Purplez  阅读(156)  评论(0)  编辑  收藏  举报

《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>
View Code

关于渐变填充参考如下：

LinerGradient references: https://segmentfault.com/a/1190000009278935