svg線性漸變
我在html中編譯svg線性，不起作用，不能這樣用？？還是只能保存svg文件，用瀏覽器打開
onlyone
2015-11-03
1 回答
舉報(bào)
0/150
提交
取消
2016-01-04
給你源碼對(duì)照一下
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>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="start" 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" >
? ? ? ? ? ? ? ?<circle cx="-250" cy="-150" r="100" fill="white"></circle>
? ? ? ? ? ? ? ?<circle cx="-200" cy="-180" 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" r="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 -300 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="4"></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(#fadeing)" >
? ? ? ?<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="fadeing">
? ? ? ? ? ? ? ?<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>
? ?</g>
? ?<line x1="-400" y1="50" x2="400" y2="50" stroke="white"></line>
</svg>
<script>
? ?var SVG_NS="http://www.w3.org/2000/svg",
? ? ? ?XLINK_NS="http://www.w3.org/1999/xlink";
? ?var paper = document.querySelector('svg');
? ?renderStar();
? ?function use(origin){
? ? ? ?var _use = document.createElementNS(SVG_NS,'use');
? ? ? ?_use.setAttributeNS(XLINK_NS,'xlink:href','#'+origin.id);
? ? ? ?return _use;
? ?};
? ?function random (min,max){
? ? ? ?return min + (max-min) * Math.random();
? ?};
? ?function renderStar(){
? ? ? ?var starRef = document.getElementById('start'),//星星原型
starGoup = document.getElementById('star-group'),//星星分級(jí)
starCount = 500;//星星個(gè)數(shù)
while (starCount--){
? ? ? ? ? ?var 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) + ')'
);
? ? ? ? ? ?starGoup.appendChild(star);
? ? ? ?}
? ?}
</script>
</body>
</html>