[Løst] SVG - Tegne en rett linje i svg

[GamEpaL]

Jeg vil tegne en linje fra x=100 og y=100 og den skal avsluttes på x=900 og y=100 og at det tar 3 sekunder å tegne linjen, når skjermebildet lades.

 

I starten skal linjen ha en lengde på 0px og avsluttes med en lengde på 800px.

 

Jeg har prøvd med <line ...> og animateTransform, men tror jeg må bruke <path... i tillegg. Men usikker på hvordan det hele skal programmeres.

 

Er det noen som kan hjelpe meg...

[Garanti]

Noen spesiell grunn til at du ønsker å gjøre dette i SVG?

 

Dersom dette skal være en loadingbar (fysj) er det vel greiere å lage en <div> og kjøre jQuery.animate() på den, evt. bruke CSS3-animasjon.

[GamEpaL]

Yupp... jeg skal lage siden med svg. Og vil bruke det fordi jeg vil lære mer om svg.

 

Jeg kan css og css3 ganske brukbart. jQuery er jeg litt mer rusten på. Men akkurat nå vil jeg lære litt om svg og hvordan animere i svg.

[GamEpaL]

Fant det ut selv gitt, etter litt leiting på nettet. Google er en fin liten ting

 

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "link"

<svg width="800" height="800" xmlns="weblink"

xmlns:xlink="weblink">

<g style="stroke:black" >

<line x1="100" y1="100" x2="100" y2="100" style="stroke:rgb(0,0,0);stroke-width:20;" >

<animate attributeName="x2" from="100" to="900" begin="1s" dur="2s" fill="freeze" />

<animate attributeName="y2" from="100" to="100" begin="1s" dur="2s" fill="freeze" />

</line>

</g>

</svg>

Det med fill="freeze" er en vesentlig ting. Uten den så går linjen tilbake til den opprinnelige linjen satt i <line ...

se link http://www.icipher.net/svg/line1.svg

Endret 2. februar 2015 av GamEpaL