Skalering av SVG

[Svish]

Hvordan kan jeg få til det? Det står jo for Scalavle Vector Graphics gjør det ikke? Så det burde jo liksom gå da, hehe.

 

Altså, jeg lager en svg fil serverside som jeg skal vise i browseren. Den inneholder en graph, og Height og width attributen i svg taggen kommer an på innholdet. plotter en rekke punkter og setter høyden = høyeste y og bredden = høyste x. Men hvordan kan jeg putte denne svg fila inn på en html side? Akkurat nå gjør jeg det slik her:

<object data="graph.jsp" type="image/svg+xml" width="100%" height="100"></object>

SVG fila ser slik ut:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="70" height="23" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <line x1="5" y1="7" x2="10" y2="17" style="stroke: #070; stroke-width:1" />
  <line x1="10" y1="17" x2="15" y2="3" style="stroke: #070; stroke-width:1" />
  <line x1="15" y1="3" x2="50" y2="12" style="stroke: #070; stroke-width:1" />
  <line x1="50" y1="12" x2="55" y2="10" style="stroke: #070; stroke-width:1" />
  <line x1="55" y1="10" x2="70" y2="23" style="stroke: #070; stroke-width:1" />
</svg>

 

Og problemet er at den i object taggen bare blir 70 x 23. Jeg vil at den skal strekke seg ut i hele object sin bredde og høyde! Og dersom den er mindre, krympe. Hvordan kan jeg få til det? Mener liksom at det burde være mulig..

 

(Er det forøvrig mulig å putte stroke og stroke-width i noe lignende <style> i html? så jeg ikke trenger å oppgi det for hver eneste line?)

[mohuhau]

Sett width og height til 100% og se legg til viewBox i <svg>

I tillegg hadde jeg byttet ut line med polyline i dette tilfellet. Da får du denne koden:

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 70 23" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <polyline stroke="blue" fill="none" stroke-width="1" points="5,7,10,17,15,3,50,12,55,10,70,23" />
</svg>

 

Dersom du trenger stilsett bruker du:

<?xml-stylesheet href="stilsett.css"
type="text/css"?>

[Svish]

det er utført, og det funket ypperlig supert!

[Format71]

Det står jo for Scalavle Vector Graphics gjør det ikke?

 

Nei, det gjør ikke det. Det står for Scalable Vector Graphics. Eller Stavanger Airport, Sola....

 

 

-Vegar

[Svish]

blæ