html5 svg

最新推荐文章于 2022-08-08 22:55:57 发布

沈纵情

最新推荐文章于 2022-08-08 22:55:57 发布

阅读量1.1k

点赞数

分类专栏： html5-web 文章标签： html5 tree function list url path

本文链接：https://blog.csdn.net/jianguo_liao19840726/article/details/7655770

版权

html5-web 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!doctype html>
<title>Happy Trails in SVG</title>

<style>
  svg {
    border: 1px solid black;
  }
  g[id=Tree]:hover  {
    opacity: 0.9;
    cursor: crosshair;
  }
</style>

<div>
  <button id="AddTreeButton">Add Tree</button>
</div>

<svg width="400" height="600">

  <defs>
    <pattern id="GravelPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
      <image x=0 y=0 width=100 height=67 xlink:href="gravel.jpg" />
    </pattern>
    <linearGradient id="TrunkGradient">
        <stop offset="0%" stop-color="#663300" />
        <stop offset="40%" stop-color="#996600" />
        <stop offset="100%" stop-color="#552200" />
    </linearGradient>

    <rect x="-5" y="-50" width=10 height=50 id="Trunk" />
    <path d="M-25, -50
            L-10, -80
            L-20, -80
            L-5, -110
            L-15, -110
            L0, -140
            L15, -110
            L5, -110
            L20, -80
            L10, -80
            L25, -50
            Z"
        id="Canopy"
      />
    <linearGradient id="CanopyShadow" x=0 y=0 x2=0 y2=100%>
        <stop offset="0%" stop-color="#000" stop-opacity=".5" />
        <stop offset="20%" stop-color="#000" stop-opacity="0" />
    </linearGradient>
    <g id="Tree">
      <use xlink:href="#Trunk" fill="url(#TrunkGradient)" />
      <use xlink:href="#Trunk" fill="url(#CanopyShadow)" />
      <use xlink:href="#Canopy" fill="none" stroke="#663300"
         stroke-linejoin="round" stroke-width="4px" />
      <use xlink:href="#Canopy" fill="#339900" stroke="none" />
    </g>
  </defs>


  <g transform="translate(-10, 350)"
      stroke-width="20"
      stroke="url(#GravelPattern)"
      stroke-linejoin="round">
        <path d="M0,0 Q170,-50 260, -190 Q310, -250 410,-250"
          fill="none" />
  </g>

  <text y=60 x=200
    font-family="impact"
    font-size="60px"
    fill="#996600"
    text-anchor="middle" >
    Happy Trails!
  </text>
  <text y=90 x=200
    font-family="impact"
    font-size="20px"
    fill="#996600"
    text-anchor="middle" id="TreeCounter">
  </text>

  <text y=420 x=20
    font-family="impact"
    font-size="20px"
    fill="#996600"
    text-anchor="left">
    <tspan>You can remove a</tspan>
    <tspan y=440 x=20>tree by clicking on it.</tspan>
  </text>

  <use xlink:href="#Tree" transform="translate(130,250)" />
  <use xlink:href="#Tree" transform="translate(260, 500) scale(2)" />
</svg>

<script>
  function removeTree(e) {
    var elt = e.target;
    if (elt.correspondingUseElement) {
      elt = elt.correspondingUseElement;
    }
    elt.parentNode.removeChild(elt);
    updateTrees();
  }

  document.getElementById("AddTreeButton").onclick = function() {
    var x = Math.floor(Math.random() * 400);
    var y = Math.floor(Math.random() * 600);
    var scale = Math.random() + .5;
    var translate = "translate(" +x+ "," +y+ ") ";

    var tree = document.createElementNS("http://www.w3.org/2000/svg", "use");
    tree.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#Tree");
    tree.setAttribute("transform", translate + "scale(" + scale + ")");
    document.querySelector("svg").appendChild(tree);
    tree.onclick = removeTree;
    updateTrees();
  }

  function updateTrees() {
    var list = document.querySelectorAll("use");
    var treeCount = 0;
    for (var i=0; i<list.length; i++) {
      if(list[i].getAttribute("xlink:href")=="#Tree") {
        treeCount++;
        list[i].onclick = removeTree;
      }
    }
    var counter = document.getElementById("TreeCounter");
    counter.textContent = treeCount + " trees in the forest";
  }

  updateTrees();
</script>

沈纵情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 svg

Happy Trails in SVG svg { border: 1px solid black; } g[id=Tree]:hover { opacity: 0.9; cursor: crosshair; } Add Tree
复制链接

扫一扫