主要代码：
代码详见GitHub：https://github.com/toly1994328/svg-night：
svg星空
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6</head> 7<style> 8 html, body { 9 margin: 0; 10 padding: 0; 11 width: 100%; 12 height: 100%; 13 background: #001122; 14 line-height: 0; 15 font-size: 0; 16 } 17</style> 18<body> 19 20<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="main-svg" 21 viewBox="-400 -300 800 600" 22 preserveAspectRatio="xMidYMid slice"> 23 <defs> 24 <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="#fff"></polygon> 25 </defs> 26 <g id="real"> 27 <g id="star-group"></g> 28 <g id="tower-group" transform="translate(250,0)"> 29 <defs> 30 <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0"> 31 <stop offset="0" stop-color="#999"></stop> 32 <stop offset="1" stop-color="#333"></stop> 33 </linearGradient> 34 </defs> 35 36 <defs> 37 <radialGradient id="light" cx="0.5" cy="0.5" r="0.5"> 38 <stop offset="0" stop-color="rgba(255,255,255,0.8)"></stop> 39 <stop offset="1" stop-color="rgba(255,255,255,0)"></stop> 40 </radialGradient> 41 </defs> 42 43 <clipPath id="light-clip"> 44 <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,255,255,0.6)"> 45 <animateTransform 46 attributeName="transform" 47 attributeType="XML" 48 type="rotate" 49 from="0" 50 to="360" 51 dur="10s" 52 repeatCount="indefinite"> 53 </animateTransform> 54 </polygon> 55 <circle cx="0" cy="0" r="2"></circle> 56 </clipPath> 57 58 <polygon points="0 0 5 50 -5 50" fill="url(#tower)"> 59 </polygon> 60 <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-clip)"></ellipse> 61 62 63 </g> 64 <g id="moon-group" transform="translate(0,-50)"> 65 <mask id="mask"> 66 <circle cx="-250" cy="-50" r="70" fill="white"></circle> 67 <circle cx="-220" cy="-80" r="70" fill="black"></circle> 68 </mask> 69 <circle cx="-250" cy="-50" r="70" fill="#ff0" mask="url(#mask)"></circle> 70 </g> 71 </g> 72 73 <g id="ref" transform=" translate(0,50)" mask="url(#ref-mask)"> 74 <defs> 75 76 <linearGradient id="fade" x1="0" y1="0" x2="0" y2="1"> 77 <stop offset="0" stop-color="rgba(255,255,255,.3)"></stop> 78 <stop offset="0.5" stop-color="rgba(255,255,255,0)"></stop> 79 </linearGradient> 80 <mask id="ref-mask"> 81 <rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect> 82 </mask> 83 </defs> 84 <use xlink:href="#real" transform="scale(1,-1) translate(0,-50)"></use> 85 </g> 86</svg> 87 88</body> 89<script src="jquery-3.3.1.js"></script> 90<script src="$utils.js"></script> 91<script> 92 var starCount = 1000; 93 let $star_g = $('#star-group'); 94 95 renderStar(); 96 97 function renderStar() { 98 for (let i = 0; i < starCount; i++) { 99 var $use = $.addSVGel('use'); 100 $use[0].setAttributeNS($.XLINK_NS(), 'xlink:href', '#star'); 101 $use.attrSVG({ 102 t: {x: $.range([-400, 400]), y: $.range([-300, 50])}, 103 sca: $.range([0.2, 0.3]), 104 rot: $.range([0, 360]), 105 op: $.range([0.2, 0.5]) 106 }); 107 $star_g.append($use); 108 } 109 } 110 111</script> 112</html>