千盟實(shí)習(xí)1608學(xué)習(xí)筆記svg示例漸變

SVGSVG制漸變的變化。在這篇文章中，介紹一些基本的SVG漸變知識(shí)。瀏覽器支持SVG關(guān)于SVGSMIL動(dòng)畫（動(dòng)畫在SVG元素內(nèi)部），IE瀏覽器、IE 和OperaMini不支持這種動(dòng)畫，但是它被最新版本的Chrome、Firefox、Safari、Opera的桌面和移動(dòng)版本的瀏覽器所支持。SVG漸變SVGSVGSVGfillstroke<linearGradient<linearGradient<stopoffset="0"stop-color="#b2ed9d"<stopoffset="100%"stop-color="#569b3d"<rectwidth="600"height="150"fill="url(#greenGradient)"漸變的詳細(xì)信息我們寫在<defs>IDfill屬性中它：fill"url(#greenGradient)"600，150SVG漸變屬性下面我們來看一下我們的DEMO中用到的屬性：ID：一個(gè)漸變的唯一標(biāo)識(shí)符，它會(huì)在fill或stroke中被用于漸變 x1,x2,y1y2：x1,x2,y1y2SVGXY0，右值為100%。 cx,cy,r,fx,fy：徑向漸變的屬性和線性漸變的屬性差不多，只是坐標(biāo)系更為復(fù)雜。cx、cy和r（半徑）用于指定徑向漸變的外層圓，最外層的半徑stop點(diǎn)為100%。fx和fy調(diào)用徑向漸變的圓點(diǎn)，這里的stop點(diǎn)為0%。<STOP><STOP>stop-color屬性用于定義在該stop點(diǎn)上使用什么顏色。stop-opacity屬性用于定義該顏色的<ANIMATE><ANIMATE><rectx="0"<rectx="0"y="20"width="100"<animatefrom="0"to="400px"repeatCount="indefinite"/>X4005 attributeName：attributeName定義執(zhí)行動(dòng)畫的屬性名稱。例如上面的代碼中，attributeName"x"，表示要在X軸上移動(dòng)元素。to,from：fromto fill：fillSVG<animate>元素中它有不同的含義。我們可以將它的值設(shè)置為zes，這樣動(dòng)畫會(huì)在結(jié)束后被“凍結(jié)”，不再從新開始。：指定漸變動(dòng)畫SVGstop-color、offset<stopoffset="<value>"stop-<stopoffset="<value>"stop-SVG在這個(gè)<radialGradientid="smallGradient"<stopoffset="0%"stop-<stopoffset="100%"stop-<animateattributeName="fy"dur="700ms"from="90%"to="0%"repeatCount="indefinite"<radialGradientid="largeGradient"<stopoffset="0%"stop-<stopoffset="100%"stop-<animateattributeName="fy"dur="700ms"from="90%"to="0%" 上面有兩個(gè)徑向漸變："smallGradient"和"largeGradientfy700從90%變化到0%。這個(gè)效果被制作為無限循環(huán)動(dòng)畫。這些動(dòng)畫被目標(biāo)元素使用fill屬性的url通過ID標(biāo)識(shí)符來<linearGradientid="darkGradient"x1="30%"<linearGradientid="darkGradient"x1="30%"<stopoffset="0%"stop-<animateattributeName="stop-color"values="#0b2d13;#79c98c"dur="3s"ze"<stop<stopoffset="100%"stop-<animateattributeName="stop-color"values="#79c98c;#0b2d13"dur="3s"ze"<linearGradientid="lightGradient"x1="30%"<stopoffset="0%"stop-<animateattributeName="stop-color"values="#054f16;#91bc9c"dur="3s"<stopoffset="100%"stop-<animateattributeName="stop-color"values="#91bc9c;#054f16"dur="3s"ze"ze"<animate>元素放置在100%stop點(diǎn)的內(nèi)部，它要?jiǎng)赢嫷膶傩悦Q是stop-color。漸變動(dòng)畫的顏色值使用的的<values>3”（停止）這個(gè)demo實(shí)際是動(dòng)畫stop的offsetoffset的一個(gè)額外動(dòng)畫，使stop點(diǎn)從100%變化到0%，從而使整個(gè)動(dòng)畫無限循環(huán)下去。<linearGradientid="skyGradient"x1="100%"<stopoffset="0%"stop-color="lightblue"stop-<animateattributeName="stop-color"values="lightblue;blue;red;red;black;red;red;purple;lightblue"dur="14s"repeatCount="indefinite"/><stopoffset="100%"stop-color="lightblue"stop-<animateattributeName="stop-color"<animateattributeName="offset"values=".95;.80;.60;.40;.20