Announcement

Collapse
No announcement yet.

SVG - Object in SVG einbinden

Collapse
X
Collapse
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • #1

    SVG - Object in SVG einbinden

    Hallo

    Vielleich hat jemand von euch eine Idee oder Hinweis.

    Ich möchte ein SVG Object einbinden. Dabei gibt es 2 Probleme:
    1) Innerhalb HTML5 klappt es - innerhalb des SVG Bereich tut sich nichts
    2) Der Parameter wird nicht an das Object übergeben

    Hier der HTML5/SVGCode

    Code:
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Test</title>   
</head>
<body>
<svg width="2000" height="2000">
       <object type="image/svg+xml" data="lamp.svg" style="width: 450px; height:150px;">
          <param name="color" value="yellow" />
       </object>
</svg>
</body>
</html>
    Das lamp.svg

    Code:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40">
<title>lamp</title>
  <circle cx="30" cy="30" r="15" fill="param(color)" stroke-width=""/>
</svg>
    Vielen Dank im Voraus
    Tags: html5, object, svg
  • #2
    Ist die Syntax fill="param(color)" irgendwo definiert?
    In http://www.w3.org/TR/SVG11/painting....pecifyingPaint finde ich das nicht.
    Und ein (X)HTML "object"-Element innerhalb eines SVG "svg"-Elementes erscheint mir auch nicht sinnvoll.

    Comment

    • #3
      Erstmal Danke für deine Hilfe.

      Was ist mein Ziel: Ich baue gerade ein Homesystem welches Daten und Zustände darstellt (zb Licht ein/aus; Temperatur, ect) und empfangen/steuere einen Microcontroller damit an.

      Das ganze soll in SVG visiualisiert werden und besteht aus den Grundriss des Gebäudes und den zu schaltenden Objecten-Aktoren.

      Die SVG.Objecte sollten als eigene Files gespeichert werden und innerhalb <svg></svg> eingebunden werden
      mit
      Code:
      <image x="10" y="20" xlink:href="lamp.svg" />
      klappts auch nicht

      Etwa so sollte der Quellcode ausschauen
      Code:
      <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Test</title>   
</head>
<body>
<svg width="2000" height="2000">
  <..... object lamp id="1"...../> 
  <..... object lamp id="2"...../>
  <..... object lamp id="3"...../>
  usw
  ......

  <......grundriss..../>
</svg>
</body>
</html>


      Quelle von fill="param(color)"
      http://dev.w3.org/SVG/modules/param/...ramPrimer.html
      Zuletzt editiert von mr_sol; 09.09.2011, 08:54.

      Comment

      • #4
        So ich http://dev.w3.org/SVG/modules/param/...ramPrimer.html richtig verstehe, ist das der Versuch einer Spezifikation, die bis jetzt (vermutlich) nicht von SVG-Browsern unterstützt wird, sondern auf einer Implementierung mittels des Scripts http://dev.w3.org/SVG/modules/param/master/param.js basiert. Die SVG-Beispiele in SVGParamPrimer.html enthalten daher auch
        Code:
        <script type="text/ecmascript" xlink:href="param.js" />
        am Ende des SVG-Dokumentes.
        Über das Script wird allerdings gesagt: "Note that these examples are emulated by a Javascript prototype. It should work in Opera, Firefox, and Safari, and maybe others (Chrome? Plugins?). The script may be used as is, and is released under a CC license, but it is not intended as production code. Content authors are encouraged to experiment with this code, and to comment to the SVG WG at [email protected] with suggestions and critiques of the specification based on experience.".

        Comment

        • #5
          Leider gibts da eine js Krücke.

          Gibts sonst keine Möglichkeit externe svg Files innerhalb der svg Tags zu laden?

          Comment

          • #6
            Innerhalb eines SVG-Dokumentes oder SVG-Fragmentes solltest du schon andere SVG-Dokumente per SVG-"image"-Element einbinden können. Eventuell muss man aber sowohl x, y als auch width, height und xlink:href Attribut angeben.
            Mit welchem SVG-Viewer versuchst du das? Ich bin mir beim Adobe SVG viewer nicht sicher, ob der das Einbinden von SVG in SVG unterstützt hat, aber ansonsten habe ich hier folgendes erfolgreich mit FF 6, IE 9, Opera 11.5, Chrome getestet:
            Code:
            <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">
     
     <title>Testing SVG image linking to SVG graphics</title>
     
     <image x="0" y="0" width="20" height="20" xlink:href="test2011090902.svg"/>

</svg>
            wobei dann test2011090902.svg z.B. einfach
            Code:
            <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">
     
<circle cx="50" cy="50" r="30" fill="green"/>

</svg>
            Mit der Parameterübergabe kenne ich mich nicht aus.

            Comment

            • #7
              Super klappt - Vielen Dank.

              Frage an den Experten. Es sollte alles unter HTML5 laufen.


              Der Code klappt, aber ist er auch HTML5 korrekt?
              Code:
              <!DOCTYPE html>
<html>
<head>
   <title>Test</title>   
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">     
     <image x="0" y="0" width="20" height="20" xlink:href="lamp.svg"/>
</svg>
</body>
</html>
              deto svg code

              Comment

              • #8
                Originally posted by mr_sol View Post
                Der Code klappt, aber ist er auch HTML5 korrekt?
                Kontrollier es doch mit einem Validator

                Comment

                • #9
                  Besten Dank

                  Comment

                  • #10
                    Was HTML5 angeht, so ist ein Validator sicher eine gute Idee.
                    Meines Wissens braucht man mit HTML5, wenn es als text/html ausgeliefert wird, die Namensraumdeklarationen, die du noch beim "svg"-Element hast, nicht; siehe auch http://www.w3.org/TR/html5/syntax.html#attributes-0.
                    Man muss halt nur darauf achten, dass das Attribut nur "xlink:href" benannt wird, während man in XML jeden Präfix verwenden könnte, den man vorher deklariert.

                    Comment

                    • #11
                      Zwar mit zwei Warnungen aber ohne Fehler

                      Code:
                      <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>   
</head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">     
     <image x="0" y="0" width="20" height="20" xlink:href="lamp.svg"/>
</svg>
</body>
</html>
                      Danke an alle

                      Comment

                      • #12
                        Sorry es hat sich noch ein Problem ergeben:

                        Code:
                        <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">
 
 <defs>
  <g id="test">
    <circle cx="50" cy="50" r="30" fill="green"/>
  </g> 
</defs>
</svg>
                        Beim Aufruf dieses svg files klappt obiges html nicht. Mit def werden Objecte angelegt und per use aufgerufen. Wie klappt das mit image?

                        Comment

                        • #13
                          Wo ist denn das "use"-Element? Nur mit "defs" wird nichts angezeigt.

                          Comment

                          • #14
                            Versuchst du im HTML-Dokument in einem SVG-Fragment per "use" andere Elemente aus einem externem SVG-Dokument zu benutzen? Per "image"-Element bindet man immer ein komplettes Dokument ein, man kann aber, so die SVG-Implementierung das unterstützt, per
                            Code:
                              <use x="0" y="0" xlink:href="someFile.svg#c1"></use>
                            einzelne Elemente aus anderen Dokumenten benutzen (im Beispiel also das Element mit id="c1" im Dokument someFile.svg. Erfolgreich getestet habe ich das aber hier nur mit FF 6 und Opera 11.5 und Batik 1.7 Squiggle, mit IE 9 oder Chrome 13 funktioniert das nicht.
                            Und da du auch noch HTML5 mit SVG verwenden willst, bleibt im Moment nur Mozilla, da Opera noch keinen HTML5-Parser hat und Batik ja ein reines SVG-Toolkit ist.

                            Comment

                            • #15
                              Hallo Martin!

                              Danke für die die Antwort. Vielleich denke ich zu eindimensional.

                              Ich versuche möglichst genau mein Ziel zu beschreiben.
                              Vielleicht ist mein Ansatz nicht optimal und du hast eine bessere Idee.

                              Ich benötige SVG Objecte. Von diesen sollen beliebig viele Instanzen erzeugt werden können.
                              Das Object sollte als svg file vorliegen und in den SVG Bereich eingebunden werden.
                              Per Parameter oder js sollten diese Instanz veränderbar sein oder eine SMIL animation auslösen.

                              Beispiel: Haussteuerung

                              1. Baue komplette Grundriss des Hause in HTML/SVG und zeichne alle SVG Objecte (Beleuchtung, Temperatur..) an die richtige Stelle ->
                              2. Homeserver liefert Daten über zB Licht ein/aus->
                              3 .Serveranfrage per ajax jede sekunde - Die letzte Veränderung wird im XML Format geliefert->
                              4. Javascript verändert vorhandene SVG Instanz (Lampe) von dunkel auf hell

                              1(Grundriss klappt),2,3 klappen 1(Object),4 scheitert momentan

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X