請問哪里有源碼下載呢

右下角只有pdf下載，請問哪里有源碼下載呢？

roadson

2015-08-12

源自：走進SVG 6-4

關(guān)注問題我要回答

573

操作

收起

1 回答

求知的木頭
2015-10-12

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title></title>
</head>
<style>
html,body{
? ? ? ?margin: 0;
? ? ? ?padding: 0;
? ? ? ?width: 100%;
? ? ? ?height: 100%;
? ? ? ?background: #001122;
? ? ? ?line-height: 0;
? ? ? ?font-size: 0;
? ?}
</style>
<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"> ?//月牙
<mask id="moon-mask"> ?//用2個圓畫出月牙的圖形，在用蒙板效果遮罩下面黃色的圓
<circle cx="-250" cy="-150" r="100" fill="white"></circle>
? ? ? ? ? ? ? ? ? ?<circle cx="-200" cy="-200" r="100" fill="black"></circle>
? ? ? ? ? ? ? ?</mask>
? ? ? ? ? ? ? ?<circle cx="-250" cy="-150" 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>
? ? ? ? ? ? ? ? ? ?<radialGradient id="light" cx="0.5" cy="0.5" cr="0.5"> ?//燈塔光漸變色也就是橢圓的漸變色
<stop offset="0" stop-color="rgba(255,255,255,.8)"></stop>
? ? ? ? ? ? ? ? ? ? ? ?<stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
? ? ? ? ? ? ? ? ? ?</radialGradient>
? ? ? ? ? ? ? ? ? ?<clipPath id="light-clip"> //裁切圖形 ?用下面的圖形裁切 ? 得到重疊的部分
<polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,.5)">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
dur="10s"
reqeatCount="indefinite">
? ? ? ? ? ? ? ? ? ? ? ? ? ?</animateTransform> //燈塔旋轉(zhuǎn)特效
</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>//橢圓 ?clip-path：引用圖形
</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,.3)"></stop>
? ? ? ? ? ? ? ? ? ?<stop offset="1" stop-color="rgba(255,255,255,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)"></use>//圖形反轉(zhuǎn)并且移動Y位子,use里面不能加mask
</g>

<line x1="-400" y1="50" x2="400" y2="50" stroke="white"></line>
? ?</svg>
</body>
<script>
var SVG_NS = 'http://www.w3.org/2000/svg';
var XLINK_NS = 'http://www.w3.org/1999/xlink';
var paper = document.querySelector('svg');
renderStar();
function use(origin){
var _use = document.createElementNS(SVG_NS,'use'); ?//createElementNS() 方法可創(chuàng)建帶有指定命名空間的元素節(jié)點
_use.setAttributeNS(XLINK_NS,'xlink:href','#'+origin.id); ?//setAttributeNS() 方法創(chuàng)建或改變具有命名空間的屬性
return _use;
? ?}
function random(min,max){
return min +(max-min)*Math.random();
? ?}
function renderStar(){
var starRef = document.getElementById('star'); ?//獲取星星
var starGroup = document.getElementById('star-group');//把星星放在star-group里面
var starCount = 500;//星星的個數(shù)
var star;
while (starCount--){
star = use(starRef);
star.setAttribute('opacity',random(0.1,0.4));
star.setAttribute('transform','translate('+random(-400,400)+','+random(-300,50)+')'
+'scale('+random(0.1,0.6)+')'); //random() 方法可返回介于 0 ~ 1 之間的一個隨機數(shù).scale() 方法標注畫布的用戶坐標系統(tǒng)
starGroup.appendChild(star);
? ? ? ?}
? ?}
</script>
</html>