nicht angemeldet
Grösse eines SVG in einem HTML-Dokument ändern ?
Hallo,
kann jemand bei folgendem Problem helfen? :
Ich möchte ein SVG-Objekt, dass in ein HTML-Dokument eingebettet ist durch Ziehen mit der Maus vergössern, ähnlich wie in einem Grafikprogramm.
Ich konzentriere mich zunächst nur auf die Funktionsfähigkeit im FF.
Dabei meine ich folgendes festzustellen :
1.) SVG lässt sich im Firefox nur mit dem <object>-Tag einbetten. Mit dem <embed>-tag funktioniert es bei mir nicht. Mach ich hier etwas falsch?
2.) Die Ereignishandler funktionieren im object-Tag, also auf dem SVG, nicht. Ich muss ein zusätzliches <DIV> über die SVG drüberlegen.
Gibt es eine einfachere Möglichkeit?
3.) Ich muss die ursprüngliche Grösse (zumindest die Breite, bei mir 155px) des SVG kennen und im object-Tag angeben. Ansonsten kann es passieren, dass der FF die Grafik mit Scrollbalken anzeigt. Kann man das umgehen?
4.) Die Änderung der Breite mittels der Javascript-Funktion tut es nicht.
Wie kann ich die Grösse der SVG denn nun verändern?
Vielen Dank schon mal für etwaige Hilfe. Der HTML-Code in einer vereinfachten Form folgt hier:
____________________________________________________________
<HTML>
<HEAD>
<style type="text/css">
#svg1
{
position:absolute;
top: 100px;
left: 100px;
width: 155px;
}
.div1
{
position:absolute;
top:100px;
left:100px;
width:500px;
height:500px;
border-color:red;
border-width:2px;
border-style:solid;
}
</style>
<script type="text/javascript">
<!--
function TestResize ()
{
var obj = document.getElementById('gef1');
alert ("Test");
obj.style.width = "300px";
}
-->
</script>
</HEAD>
<BODY>
<OBJECT id="svg1" data="test.svg" type="image/svg+xml"> </OBJECT>
<DIV class="div1" onClick="TestResize()"> </DIV>
</BODY>
</HTML>
-
Korrektur im Script:
Falsch: var obj = document.getElementById('gef1');
Richtig: var obj = document.getElementById('svg1'); -
Hallo SVG'ler,
Ich möchte ein SVG-Objekt, dass in ein HTML-Dokument eingebettet ist durch Ziehen mit der Maus vergössern, ähnlich wie in einem Grafikprogramm.
Ich konzentriere mich zunächst nur auf die Funktionsfähigkeit im FF.Erklär das noch ein wenig genauer. Wo möchtest du du ziehen? An den Ecken bzw. Rändern? Dann benötigst du keinen Event auf dem Object Element.
1.) SVG lässt sich im Firefox nur mit dem <object>-Tag einbetten. Mit dem <embed>-tag funktioniert es bei mir nicht. Mach ich hier etwas falsch?
Doch geht beides. Achte darauf, dass beim embed-Element die Datei nicht mit dem Attribut data sondern mit dem Attribut src eingebunden werden muss.
Über die Verwendung von object bzw. embed und die unterschiedlichen Vor- und Nachteile findest du bei den folgenden Quellen weitere Infos:
Vor- Nachteile
Kommunikation mit Javascript
Authoring Guidelines
Alternative: SVG mit JavaScript erstellen (Libraries)2.) Die Ereignishandler funktionieren im object-Tag, also auf dem SVG, nicht. Ich muss ein zusätzliches <DIV> über die SVG drüberlegen.
Nein das funktioniert nicht, da hast du recht. Das SVG-Objekt "empfängt" den Klick nicht. Was du aber machen könntest ist den Klick _im_ SVG Dokument selbst abzufangen und dann (mit parent.) auf das einbindende Dokument zuzugreifen.
Siehe aber meine Eingangsfrage. Muss das überhaupt so funktionieren?
3.) Ich muss die ursprüngliche Grösse (zumindest die Breite, bei mir 155px) des SVG kennen und im object-Tag angeben. Ansonsten kann es passieren, dass der FF die Grafik mit Scrollbalken anzeigt. Kann man das umgehen?
Wenn du im Element <svg> relative Grössen (z.B. 100%) für Breite und Höhe verwendest, sollte sich das SVG Object perfekt anpassen.
4.) Die Änderung der Breite mittels der Javascript-Funktion tut es nicht.
Wie kann ich die Grösse der SVG denn nun verändern?Doch es funktioniert. Bei einem Klick auf das DIV verändert das (dahinterliegende!) SVG-Objekt seine Breite.
Grüsse
Siramon,
ja der Penner aus Nr. 14-
Hi,
Erklär das noch ein wenig genauer. Wo möchtest du du ziehen? An den Ecken bzw. Rändern?
Ja. Wie in einem Grafikprogramm. Ist einfach mal nur um zu gucken was so geht mit SVG und einem Browser.
Doch geht beides. Achte darauf, dass beim embed-Element die Datei nicht mit dem Attribut data sondern mit dem Attribut src eingebunden werden muss.
Danke! Da hab ich nicht aufgepasst.
Nein das funktioniert nicht, da hast du recht. Das SVG-Objekt "empfängt" den Klick nicht. Was du aber machen könntest ist den Klick _im_ SVG Dokument selbst abzufangen und dann (mit parent.) auf das einbindende Dokument zuzugreifen.
Das versuche ich mal. Komme ich auch von da auf ein window.alert() ? Vielelicht mit parent.parent.alert?
Wenn du im Element <svg> relative Grössen (z.B. 100%) für Breite und Höhe verwendest, sollte sich das SVG Object perfekt anpassen.
Probiere ich mal aus. Hätte aber den ANchteil, dass ein von einem Grafikprogramm erzeugtes SVG nochmal manuell geändert werden muss.
Doch es funktioniert. Bei einem Klick auf das DIV verändert das (dahinterliegende!) SVG-Objekt seine Breite.
Das muss ich mir nochmal angucken. Bei mri tut es das noch nicht.
Schonmal Danke für Deine Hilfe.
-
Was du aber machen könntest ist den Klick _im_ SVG Dokument selbst abzufangen und dann (mit parent.) auf das einbindende Dokument zuzugreifen.
Wo kommt denn der Eventhandler hin, wenn man einen Klick auf dem kompletten SVG abfangen will? In ein einzelenes Element geht dann ja schlecht.
-
Wenn du im Element <svg> relative Grössen (z.B. 100%) für Breite und Höhe verwendest, sollte sich das SVG Object perfekt anpassen.
Das klappt bei mir nicht. Im SVG steht 100% für Breite und Höhe, im <object>-Tag habe ich über css eine Breite von 500 Pixeln angegeben. Es wird abner nicht auf die Breite skaliert.
-