svg object formaat

[Verwijderd]

Weer eens een basic vraag voor de afwisseling , of althans, zou basic moeten zijn.

Ik heb een paragraaf (div) van 80% schermbreedte met daarin tekst enzo en ook een svg object.
Nu wil ik dat dat object net zo breed wordt als de paragraaf, iets wat met plaatjes erg simpel gaat:

Cascading Stylesheet:

img {
  width: 100%;
}

nu de svg, hetzelfde geeft een probleem, er veranderd namelijk niks, de svg blijft het formaat houden dat intern is gespecificeerd. Met een expliciete height aangegeven werkt het wel. Het object neemt het formaat aan wat je specificeerd en de svg erin schaalt proportioneel zo groot mogelijk mee. Dus met

Cascading Stylesheet:

object[type="image/svg+xml"] {
  width: 100%;
  height: 600px;
}

heb ik altijd 600px hoogte gereserveerd, zelfs al wordt m'n breedte kleiner zodat de svg niet meer heel die hoogte vult (logisch als je expliciet px opgeeft).

Allebei op 100% zetten geeft ook niet het gewenste resultaat.

Any clues?

[Rowanov]

Voor zover ik weet is dit niet mogelijk met css alleen en gaat het in de nabije toekomst ook niet mogelijk worden. Als je doelgroep IE was geweest had je nog iets met expression kunnen doen, maar nu kom je vrijwel onvermijdelijk uit op javascript om je svg in verhouding te krijgen.

Hoe ziet die interne specificatie er eigenlijk uit in svg?

[Verwijderd]

http://www.w3.org/TR/SVG11/coords.html#ViewportSpace

maar ik wil dus een soort "auto" hoogte, de breedte geef ik expliciet op (in % dus), de hoogte moet dan gewoon meeschalen, zoals ik dat gewend ben van plaatjes

[Rowanov]

Met auto bereik je dus niet wat je wil, omdat hij als het ware een childnode binnen je svg pakt om op terug te vallen, dan wel terugvalt op de afmetingen die je als attribuut/parameter meegeeft.

Als je hem niet als object, maar juist inline zou meegeven, moet hij volgens de specs schalen naar viewport breedte. Maar volgens mij maak ik er ook uit op dat als je je document met css styled hij weer terugvalt op een ander systeem

[Verwijderd]

idd heeft het object een grootte en daarin zit een svg node die proportioneel schaalt in de plaats die ie heeft. Kan ook niet proprtioneel (aangeven in de svg), maar da's niet wat de bedoeling is.

Het probleem ligt dus dan ook vooral bij het object element denk ik. Wellicht is er een param ofzo waar ik wat mee kan? (hoewel param's volgens mij alleen invloed hebben op de content van het object).

eens kijken of het object element de svg als DOM tree bevat, dan kan ik iig met js nog iets (namelijk de aspect ratio van de svg uitlezen)