问答详情
源自:1-4 综合实例:SVG编辑器

谁有源码吗

请问谁有这一节的源码


提问者:qq_陌若安生_8 2017-06-06 10:01

个回答

  • yaoxtao
    2017-06-06 14:07:21

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <style>
       html,body{
          margin:0;
       padding:0;
       width:100%;
       height:100%;
       background:#001122;
       line-height:0;
       font-size:0;
       }
    </style>
    </head>
    <body>
      <svg width="100%" height="100%" viewBox="-400 -300 800 600"
      preserveAspectRatio="xMidYMid slice">
      <defs>
         <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon>
      </defs>
      <g id="real">
       <g id="star-group"></g>
       <g id="moon-group" transform="translate(0,100)">
      <mask id="moon-mask">
       <circle cx="-250" cy="-180" r="100" fill="white"></circle>
       <circle cx="-200" cy="-200" r="100" fill="black"></circle>
      </mask>
      <circle cx="-250" cy="-180" r="100" fill="yellow" mask="url(#moon-mask)"></circle>
       </g>
       <g id="light-tower" transform="translate(250,0)" >
       <defs>
       <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0" >
          <stop offset="0" stop-color="#999" ></stop>
          <stop offset="1" stop-color="#333" ></stop>
       </linearGradient>
       <linearGradient id="light" cx="0.5" cy="0.5" r="0.5" >
          <stop offset="0" stop-color="rgba(255,255,255,0.8)" ></stop>
          <stop offset="1" stop-color="rgba(255,255,255,0.0)" ></stop>
       </linearGradient>  
       <clipPath id="light-clip">
          <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)">
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          form="0"
          to="360"
          dur="10s"
          repeatCount="indefinite"    
        </animateTransform>
          </polygon>
          <circle cx="0" cy="0" r="2"></circle>
       </clipPath>
       </defs>
       <polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
       <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-clip)"></ellipse>
       </g>
      </g>
      <g id="reflact" transform="translate(0,50)" mask="url(#fading)">
        <defs>
        <linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
           <stop offset="0" stop-color="rgba(255,255,255,0.3)"></stop>
        <stop offset="0.5" stop-color="rgba(255,255,255,0.0)"></stop>
        </linearGradient>
        <mask id="fading">
           <rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect>
        </mask>
     </defs>
        <use xlink:href="#real" transform="scale(1,-1) translate(0,-50)">
      </g>
      <line x1="-400" y1="50" x2="400" y2="50" stroke="white"></line>
      </svg>
      <script type="text/javascript">
        var SVG_NS = "http://www.w3.org/2000/svg";
        var XLINKS_NS = "http://www.w3.org/1999/xlink";
        var paper = document.querySelector("svg");
       
     renderStart();
     
     function use(origin){
        var _use = document.createElementNS(SVG_NS,"use");
        _use.setAttributeNS(XLINKS_NS,"xlink:href","#"+origin.id);
        return _use;
     }
     
     function between(min,max){
        return min+(max - min)*Math.random();
     }
     
     function renderStart(){
       var starRef = document.getElementById("star");
       var starGroup = document.getElementById("star-group");
       var starCount = 500;
       var star;
      
       while(starCount--){
         star = use(starRef);
      star.setAttribute("opacity",between(0.1,0.6));
      star.setAttribute("transform","translate("+between(-400,400)+","+between(-300,50)+") scale("+between(0.1,0.8)+")");
      starGroup.appendChild(star);
       }
     }
     
      </script> 
    </body>
    </html>