Keskustelu: Nettisivujen teko: SVG:ssä laatikko alas

Alla oleva koodi laittaa laatikon 100px päästä kuvan yläreunaa, mutta en löydä/keksi millään miten laittaa se 100px päästä alareunaa

<?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%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!--- Custom styles -->
	<defs>
		<!--- Blue to grey gradient -->
		<linearGradient id="blue_grey" x1="0%" y1="0%" x2="50%" y2="100%">
			<stop offset="0%" style="stop-color:rgb(51,153,255);stop-opacity:1"/>
			<stop offset="100%" style="stop-color:rgb(100,100,100);stop-opacity:1"/>
		</linearGradient>
	</defs>
	<rect width="100%" height="50" y="100px" style="fill:url(#blue_grey)"/>
</svg>

No ongelmanahan tuossa on, kun et ole määritellyt minkä kokoinen se piirtoalue on, joten ei ole varsinaisesti olemassa alareunaa tai oikeaa reunaa. Määrittele viewboxin kooksi vaikka 800 x 600 pikseliä, niin silloin 100 px etäisyys alareunasta on 500px.

Grez kirjoitti:

No ongelmanahan tuossa on, kun et ole määritellyt minkä kokoinen se piirtoalue on, joten ei ole varsinaisesti olemassa alareunaa tai oikeaa reunaa. Määrittele viewboxin kooksi vaikka 800 x 600 pikseliä, niin silloin 100 px etäisyys alareunasta on 500px.

Noin se onnistuisikin, mutta haluaisin kuvasta skaalautuvan. Onko se pakko tehdä JS:llä?

Kuvahan on skaalautuva, vaikka viewbox onkin määritelty.

Esimerkki: http://grez.info/putka/OILgame/kuva.svg

Kuvasuhde pysyy samana, joten kuvaa ei voi venyttää kunnolla.

Haluaisin kanssa, että palkki olisi 50px korkea, kuten mainittu, eikä suurenisi.

Jos kuvan elementtien keskinäinen etäisyys muuttuisi ilman että elementtien koko muuttuisi, niin eihän se silloin olisi kuva vaan jotain ihan muuta.

Jos haluat tehdä useita elementtejä, joiden keskinäinen suhde muuttuu, niin se ei ole silloin tarkoituksenmukaista tehdä yhtenä kuvana. Laita kukin elementti erilliseen kuvaan ja liikuttele niitä sivulla.

Normaalisti myöskin kuvasuhteen muuttuminen venyttäessä ei ole toivottua. Tiedän kyllä että jotkut katsoo television 4:3 lähetyksiäkin 16:9 tilassa eikä heitä häiritse että ihmiset näyttää liian leveiltä, mutta minusta se on todella tyhmän näköistä. Eli kun kuvasuhde pysyy vakiona, niin ympyrästä ei tule ellipsi eikä neliöstä suorakaide.

Grez kirjoitti:

Normaalisti myöskin kuvasuhteen muuttuminen venyttäessä ei ole toivottua. Tiedän kyllä että jotkut katsoo television 4:3 lähetyksiäkin 16:9 tilassa eikä heitä häiritse että ihmiset näyttää liian leveiltä, mutta minusta se on todella tyhmän näköistä. Eli kun kuvasuhde pysyy vakiona, niin ympyrästä ei tule ellipsi eikä neliöstä suorakaide.

Siis en tahtoisi, että kaikki venyisi, vaan kaikki missä prosentteina mitat, kuten vaikka html:ssä.

Tuossa on kuva. (Kuvan formaatti tosin ei ole SVG vaan JPG, mutta tällä ei ole mitään merkitystä)

Millä tavalla skaalaisit tuota kuvaa muokkaamatta sitä, niin että kuvan suhteet muuttuisivat mutta ilman, että nuo pallot samalla muuttuisivat ellipsoideiksi?

Jos tämän kerrot ja teet esimerkin, niin kerron miten teet saman SVG:llä.

Jotakin tälläistä.

En kyllä nää tuolla sivulla yhtään kuvaa.

Grez kirjoitti:

En kyllä nää tuolla sivulla yhtään kuvaa.

Ei olekkaan, mutta miten saisin aikaan tuon näköisen sivun SVG:llä?

OILgame kirjoitti:

miten saisin aikaan tuon näköisen sivun SVG:llä?

SVG:llä ei tehdä sivuja vaan kuvia.