Anzeige:
Ergebnis 1 bis 4 von 4

Thema: SVG, Konqueror und Hintergrund

  1. #1
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825

    SVG, Konqueror und Hintergrund

    Hallo Leute,

    wie bekommt man den Hintergrund eines SVG-Bildes transparent?

    Die Grafiken werden mit php erzeugt und als <object> angezeigt. Firefox funktioniert, wie erwartet, der Hintergrund der Grafik ist transparent. Konqueror 3.5.5 gönnt sich bei dem SVG leider einen weißen Hintergrund, was nicht so dolle aussieht.

    Den bekommt man mit
    Code:
    <object data="fleurmaker.php?farbe=0&amp;muster=2&amp;hilite=0"
      type="image/svg+xml" width="110" height="110"
      style="background-color:#345"> SVG </object>
    nicht weg.

    Und warum zeigt Konqueror bei Verwendung symbol/use statt g gar nichts mehr an?

    url:
    http://gamecraft.soltau.gotdns.com/php/fleur/
    (nur bei schnellen Leitungen anklicken)

    Code eines der Bilder: http://gamecraft.soltau.gotdns.com/p...ter=0&hilite=0

    so long,
    BlueJay
    Geändert von BlueJay (19-11-2006 um 18:17 Uhr)
    Eigentlich ganz einfach, wenn man's weiss!

  2. #2
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Standardmäßig verwendet KDE den Hintergrund vom SVG Viewer.
    Du kannst aber den Hintergrund im SVG an das Dokument anpassen.
    PHP-Code:
      <!-- 
          
    Setze Beispiel Hintegrund
          Von Links Oben 12cm Breit 3
    ,5 cm Hoch
       
    -->
      <
    rect x="0" y="0" width="1200" height="350" fill="#000000"  /> 
    Oder du verwendest currentColor
    PHP-Code:
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
    >
    <
    svg width="7cm"
        
    height="2cm"
        
    viewBox="0 0 700 200"
        
    xmlns="http://www.w3.org/2000/svg">
      <
    desc>Gradiant</desc>
      <
    g>
        <
    defs>
          <
    linearGradient id="MeinGradiant" gradientUnits="objectBoundingBox">
            <
    stop offset="0%" stop-color="#F60" />
            <
    stop offset="100%" stop-color="#FF6" />
          </
    linearGradient>
        </
    defs>
        <
    rect x="1" y="1" width="698" height="198" fill="currentColor" stroke="white" stroke-width="2" />
        <
    g fill="url(#MeinGradiant)" >
          <
    rect x="100" y="50" width="200" height="100"/>
          <
    rect x="400" y="50" width="200" height="100"/>
       </
    g>
      </
    g>
    </
    svg
    http://www.schumacher-netz.de/TR/200...#DataTypeColor http://www.schumacher-netz.de/TR/200...#DataTypeColor
    http://www.schumacher-netz.de/TR/200...eAlphaBlending
    Geändert von undefined (20-11-2006 um 11:05 Uhr) Grund: Referenz eingefügt
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  3. #3
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Ich habe mir mal deinen SVG Code angesehen. Bei use verwendest du transform ohne Vorgabe der Grundmaße. Deshalb verweigert der KSVG Viewer die Anzeige. Ich würde auch auf Transform verzichten weil es ein Speicher fresser ist. Siehe auch die svg Attributes viewBox
    PHP-Code:
    < ? xml version="1.0" standalone="no" ? >
    <!
    DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
    >
    <
    svg width="105" height="105"
      
    viewBox="0 0 105 105"
      
    xmlns="http://www.w3.org/2000/svg"
      
    xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- 
    hier Gesamtbreite des Bildes angeben -->
     <
    defs>

      <
    linearGradient id="v_0" x1="0%" x2="100%" y1="0%" y2="100%">
       <
    stop offset="10%" stop-color="#ffffcc" stop-opacity="1" />
       <
    stop offset="90%" stop-color="#999966" stop-opacity="1" />
      </
    linearGradient>

      <
    linearGradient id="v_1" x1="0%" x2="0%" y1="0%" y2="100%">
       <
    stop offset="10%" stop-color="#330099" stop-opacity="1" />
       <
    stop offset="90%" stop-color="#ffee00" stop-opacity="1" />
      </
    linearGradient>

      <
    symbol id="platte" stroke-width="2" stroke="#000000" x="0" y="0" width="105" height="105">
        <
    rect x="2.5" y="2.5" width="100" height="100" rx="3" ry="3" stroke="#333333" fill="#333300"/>
        <
    rect x="0" y="0" width="100" height="100" rx="3" ry="3" stroke="#000000" fill="url(#v_0)"/>
        <
    rect x="10" y="10" width="80" height="80" stroke="#223311" fill="none"/>
        <
    rect x="15" y="15" width="70" height="70" fill="none"/>
        <
    polygon points="20,20 20,40 40,20" fill="#000000" />
        <
    polygon points="80,20 80,40 60,20" fill="#000000" />
        <
    polygon points="20,80 20,60 40,80" fill="#000000" />
        <
    polygon points="80,80 80,60 60,80" fill="#000000" />
        <
    polygon points="50,20 80,50 50,80 20,50, 50,20" fill="url(#v_1)"/>
      </
    symbol>

     </
    defs>

      <use 
    xlink:href="#platte" />

    </
    svg
    PS : Schöne Grafik
    Geändert von undefined (20-11-2006 um 12:09 Uhr) Grund: Rechtschreibfehler
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  4. #4
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    Zitat Zitat von undefined Beitrag anzeigen
    Ich habe mir mal deinen SVG Code angesehen. Bei use verwendest du transform ohne Vorgabe der Grundmaße.
    Korrigierte Version klappt

    Oder du verwendest currentColor
    Konqueror 3.5.5 lässt sich davon nicht beeindrucken.

    ABER:
    Die Dinger sollen auf einem bisher unbekannten oder auch wechselndem Hintergrund erscheinen. Da ist mit Hintergrund türken leider nix, der wird zwingend von einem anderen Programm vorgegeben.
    Genauso ist es mit der Größe, die soll sich letztendlich von aussen scriptmäßig steuern lassen.

    Schade, dass bei den CSS-Links nichts wie "transparent" oder "none" auftauchte.

    PS : Schöne Grafik
    Finden tausende andere pro Monat auch
    Originale:
    Javascript Fleur

    soll jetzt vektorisiert werden, Grafiken sind dank php soweit auch fertig.
    Aber die Anzeige im Mozilla lässt sich Zeit, wie das mit KDE4 wird, bleibt noch abzuwarten.

    so long,
    BlueJay
    Geändert von BlueJay (20-11-2006 um 16:43 Uhr)
    Eigentlich ganz einfach, wenn man's weiss!

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •