|
Nisam siguran da li je ovo prava tema za pitanje ali poshto svg kucam u html fajlu stavio sam ovde...
Naishao sam na neki tekst na internetu o SVG-u i pokusao sam sam da napravim neshto... i uspeo sam da skucam ovaj kod...
<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#666666;stop-opacity:1" />
<stop offset="8%" style="stop-color:#404040;stop-opacity:1" />
</linearGradient>
<rect width="26" height="0" x="431" y="215" fill="#262626">
<animate attributeName="height" attributeType="XML" begin="0.4s" dur="0.4s" from="0" to="60" fill="freeze"/>
</rect>
<polygon points="431,275 457,275 171,335 117,335" fill="url(#grad1)"/>
<rect width="26" height="0" x="467" y="215" fill="#262626">
<animate attributeName="height" attributeType="XML" begin="0.5s" dur="0.4s" from="0" to="60" fill="freeze"/>
</rect>
<polygon points="467,275 493,275 507,335 453,335" fill="url(#grad1)"/>
<rect width="26" height="0" x="503" y="215" fill="#262626">
<animate attributeName="height" attributeType="XML" begin="0.6s" dur="0.4s" from="0" to="60" fill="freeze"/>
</rect>
<polygon points="503,275 529,275 843,335 789,335" fill="url(#grad1)"/>
<circle cx="480" cy="130" r="118" fill="#1a1a1a">
<animate attributeName="r" attributeType="XML" begin="0s" dur="0.5s" from="0" to="118" fill="freeze"/>
</circle>
<circle cx="160" cy="375" r="0" fill="#1a1a1a">
<animate attributeName="r" attributeType="XML" begin="2.1s" dur="0.5s" from="0" to="68" fill="freeze"/>
</circle>
<circle cx="480" cy="375" r="0" fill="#1a1a1a">
<animate attributeName="r" attributeType="XML" begin="2.2s" dur="0.5s" from="0" to="68" fill="freeze"/>
</circle>
<circle cx="800" cy="375" r="0" fill="#1a1a1a">
<animate attributeName="r" attributeType="XML" begin="2.3s" dur="0.5s" from="0" to="68" fill="freeze"/>
</circle>
</svg>
i sad meni ovo radi samo u google Chrome...
Da li moze da se ovo skuca a da radi u svim novijim browserima? i kako da animiram polygon points?
|
