課程
/前端開發(fā)
/Html5
/走進(jìn)SVG
請問誰有這一節(jié)的源碼
2017-06-06
源自:走進(jìn)SVG 1-4
正在回答
<!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>
舉報(bào)
SVG是HTML5 中矢量圖的標(biāo)記語言,學(xué)習(xí)后掌握更多的干貨
1 回答為什么沒有源代碼,自己寫的代碼沒有報(bào)錯(cuò),可是沒有動(dòng)畫,不知道錯(cuò)在哪?誰可以解答一下?
4 回答感覺源代碼SVGEditor.html中有bug
1 回答請問哪里有源碼下載呢
3 回答這課程有源代碼的下載么?
4 回答求課程源碼
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-06-06
<!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>