den sichtbaren Bereich ermitteln?

[eisenmann]

Hi,
ich habe ein Programm geschrieben, das ein XML(Svg) Export anbietet.
Nun mein Problem: In dieser Grafik ist eine Zeitskala als Symbol definiert.
Jetzt möchte ich, dass dieses Symbol immer am unterm Bildschirmrand sichtbar ist. Da die Grafik in der Regel sehr groß ist, ist sie meist größer als der sichtbarer Bereich.

In einem Beispiel dürfte das Problem gut sichtbar sein. Also die orange Zeitskala soll beim scrollen und bewegen "nach geführt" werden.

Kunststile_Zeitbereich_1000_00052_08.xml

Ich dachte mir das etwa so:

function Skalazeigen()  
{  
  var Fy= 0;  
  var FUseSkala = document.getElementById('UseSkala');  
   <!-- in  UseSkala ist die Zeitskala definiert -->  
  
 Fy= ??????????  
  
  FUseSkala.setAttribute('transform','translate(0','+Fy+')');  
}

Die Funktion wird dann in onscroll und onzoom aufgerufen.

Hat da jemand einen Tipp, woher ich für die Variable Fy den unteren sichtbaren Punkt bekomme.
Sollte es einfach sein, hatte es nicht an meiner Faulheit zu suchen gelegen. Dann habe ich nur an der falschen Stelle gesucht (XML(Svg) ist noch ziemlich neu für mich).
Ich habe keine ViewBox definiert, da der gesamte zur Verfügung stehend Bildschirm genutzt werden soll.

Hoffentlich gibt es diesen Wert überhaupt.
Danke schon mal fürs lesen des Beitrags,

der eisenmann

P.S. den Beitrag habe ich auch schon am 11.02.2013 in
http://entwickler-forum.de
gestellt, aber bis jetzt hat sich da noch nix getan.

[eisenmann]

Hallo,
ich habe jetzt doch etwas bei euch gefunden:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#posbottom@title=eigenschaften/positionierung.htm#posbottom

und versuchte es zu benutzen:

<symbol id="skala" style="position:absolute; bottom:0px; left:0px;">

und so:

<use xlink:href="#skala" style="position:absolute; bottom:0px; left:0px;"> />

ändert aber nix. Was mach ich falsch?

Gruß eisenmann

[Gunnar Bittersmann]

@@eisenmann:

nuqneH

Ich habe keine ViewBox definiert, da der gesamte zur Verfügung stehend Bildschirm genutzt werden soll.

@viewBox hat (im Gegesatz zu @width und @height) nichts mit der Größe der gerenderten Grafik zu tun, sondern definiert einen Rahmen, auf den sich die Koordinaten der Pfade etc. beziehen.

Ich glaube, du möchtest @viewBox setzen, aber nicht @width und @height.

Qapla'

[eisenmann]

Hi nuqneH

Ich glaube, du möchtest @viewBox setzen, aber nicht @width und @height.

Wie schon gesagt, ich möchte die Größe der Grafik eingeben (@width und @height),
aber nicht den sichtbaren Bereich. Der soll durch den zur Verfügung stehenden Platz bestimmt werden. Die Grafik macht ja was sie soll, nur möchte ich ein Symbole (#skala) an den unteren
sichtbaren Bereich (unteren Fensterbereich) "heften". Die Skala soll nicht beim scrollen verschwinden.

Gruß Eisenmann

[eisenmann]

Hallo,

ich bin noch nicht weiter gekommen. Hier mal meine XML-Datei verkürzt:

<?xml version="1.0" encoding="iso-8859-1"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="11000" height="2300">  
	<title>Bio-Graf.de xml Export</title>  
	<desc>Bio-Graf Editor 1.01 Registriert für Günther Stadtler   &amp;lt;Kunststile_Zeitbereich_1000_00052_10.bge&amp;gt;</desc>  
	<defs>  
		  
  
  
		<symbol id="skala" >  
			<line x1="79" y1="2293" x2="79" y2="2283" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<line x1="120" y1="2293" x2="120" y2="2283" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<line x1="159" y1="2293" x2="159" y2="2283" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<line x1="240" y1="2293" x2="240" y2="2283" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<line x1="279" y1="2293" x2="279" y2="2283" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<line x1="320" y1="2293" x2="320" y2="2283" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<rect x="40" y="2293" width="40" height="2300" fill="rgb(255,128,64)" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<rect x="120" y="2293" width="40" height="2300" fill="rgb(255,128,64)" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<line x1="200" y1="2300" x2="200" y2="2270" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<rect x="240" y="2293" width="40" height="2300" fill="rgb(255,128,64)" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<rect x="320" y="2293" width="40" height="2300" fill="rgb(255,128,64)" stroke="rgb(160,160,160)" stroke-width="1"/>  
			<rect x="360" y="2270" width="80" height="2300" fill="rgb(255,128,64)" stroke="rgb(160,160,160)" stroke-width="1"/>  
			  
		</symbol>  
</defs>  
	<rect x="0" y="0" width="11000" height="2300" fill="rgb(255,255,225)" stroke="rgb(255,255,225)" stroke-width="0" onclick="SymbolZeigen(-1,0,0)"/>  
	<rect x="0" y="2220" width="11000" height="75" fill="rgb(192,192,192)" stroke="rgb(192,192,192)" stroke-width="0" onclick="SymbolZeigen(-1,0,0)"/>  
	<rect x="0" y="1600" width="11000" height="600" fill="rgb(215,215,215)" stroke="rgb(215,215,215)" stroke-width="0" onclick="SymbolZeigen(-1,0,0)"/>  
	<use xlink:href="#skala" />  
  
	  
</svg>  

wie kann ich die Position von dem Symbol #skala mit :

<div style="position:absolute; bottom:0px; left:100px">  
</div>

verändern.

Ich verstehe nicht wo ich "<div style.." einbauen muß?
Gruß
der Eisenmann

[eisenmann]

Hallo,
hier war doch die Lösung:

Entwicklerforum

danke noch an alle fürs lesen und die Antwort.

Gruß,
der Eisenmann