SVG-Grafik eingebunden als Background Image lässt sich nicht an Containergröße anpassen

  • Nabend zusammen,


    ich verzweifel gerade ein wenig, weil sich eine SVG-Grafik perfekt an die Containergröße anpasst und eine nicht.


    Die eine Grafik wird sogar vom Browser selbst beim Aufruf der Datei alleine abgeschnitten und gar nicht komplett dargestellt.


    Seht selbst: https://codepen.io/jr-cologne/pen/jaXRve


    Hat jemand eine Idee, woran das liegen könnte?


    Hier sind die beiden SVGs:


    1. http://jr-cologne.bplaced.net/img/svg.svg

    2. http://jr-cologne.bplaced.net/img/svg2.svg


    Schon mal danke im Voraus! :)


    Gruß

    JR Cologne

  • meinst du das grüne ding,wo die hälfte fehlt?

    zumindest sieht das so aus als wenn da was fehlen tut.


    wie meinst du den das mit der grösse? ist doch beides fast gleich gross,oder wie soll das sein .. kenne mich it svg noch gar nicht so gut aus

  • Ich fürchte, du kannst mir da nicht wirklich helfen, aber schön, dass du dich so engagierst. :)


    Ich spreche, wie du schon erkannt hast, vom dem grünen SVG.


    Die Größe ist gleich, das ist klar. Ist ja auch mit CSS so definiert.


    Das Problem: Dieser grüne Schnipsel, den du da siehst, ist nur ein kleiner Teil der Grafik.


    Ich möchte jetzt dafür sorgen, dass die Grafik genauso wie bei dem unteren komplett in diesen 80x80px "Rahmen" passt und abgebildet wird.

  • ich habe mal im quellcode reingeschaut,da steht ja nee menge drinne,gehe deswegen auch aus das da einiges mehr angezeigt werden muss..nur wie kommts das der browser das nicht wieder gibt.ist das bei allen browsern so?..also bei mir in opera und firefox bleibt es ein schnippsel.fals es dir hilft?.


    Kann es nicht möglich sein das beim erstellen der grafik irgendwo im code ein fehler ist ?

    aber wahrscheinlich hast du das schon ausgeschlossen,sonst würdest du ja nicht so verzweifeln.

    Naja viel glück bei derfehlersuche.

    Fals du ihn findet ,poste ihn mal.ich werde mal versuchen mich in svg reinzu lesen und mal bischen mit rum spielen,mal sehen ob ich da was schönes raus basteln kann

  • Soweit ich das überblicken kann, scheint das Verhalten in allen modernen Browsern gleich zu sein.


    Habe IE11, Edge, Chrome, und Firefox ausprobiert. Überall wird die Grafik abgeschnitten.


    An der Grafik selber kann es natürlich liegen, allerdings wüsste ich nicht woran.

  • Die Grafik kommt mir bekannt vor :-)

    Wenn ich sie allein im Browser ansehe, sieht sie genau so aus, dass nur rechts ein kleines abgeschnittenes Segment sichtbar ist (links).

    Ich kann sie jedoch komplett sichtbar machen, wenn ich die Werte im viewbox-Attribut vergrößere (rechts).

    svg1.pngsvg2.png

  • Das ist die Lösung. Sehr schön!


    Habe viewBox jetzt mal auf "0 0 400 450" gesetzt und damit funktioniert es einwandfrei.


    Danke dir, aber eine Frage hätte ich noch: Warum ausgerechnet diese Werte? :D


    Woran kann man erkennen, welche Werte man dort einsetzen muss?

  • Definitiv wissen tue ich es nicht, aber ich reime es mir folgender Maßen zusammen:

    Wenn man sich die Werte im SVG ansieht, liegen sie alle so ungefähr in dem Bereich 0 bis etwas über 400 . D. h. die Grafik, die so definiert wird, muss etwa diese Abmessungen haben.

    Hast Du das SVG generiert, wie in dem anderen Thread besprochen? Ich würde eigentlich vermuten, dass der Generator die Abmessungen von dem PNG-Bild beibehält, aber das scheint nicht zu stimmen, denn das Bild, was ich noch habe, ist über 1000 x 1000 px groß.

  • Ja, das ist exakt das Bild aus dem anderen Thread.


    Na ja, wie auch immer. Dann muss ich demnächst eventuell mal selber recherchieren, was das angeht.

    SVG ist auch echt so eine Sache für sich. :D