• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

SVG Grafik 100%Höhe Problem

N

Nikita

Mitglied
Hallo ihr Lieben,

ich hoffe ich bin hier richtig mit nem xml thema?!
Ich habe eine SVG Grafik in eine App eingebunden(funktioniert soweit) nur leider bekomm ich es einfach nicht hin, dass die svg immer vie volle Höhe des jeweiligen "Bildschirms" einnimmt. Im Querformat kein Problem aber im Hochformat keine Chance... Egal ob per css oder jquery es will einfach nicht die volle Höhe annehmen.
Vill weis jemand Rat?

Hier mein Codeschnippsel dazu:
HTML: 
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, width=device-width">
        <script type="text/javascript" src="js/jquery.js">
        </script>
        <script type="text/javascript" src="js/function.js">
        </script>
        <script type="text/javascript" src="js/ELSeFinder.js"></script>
        <script type="text/javascript" src="js/cordova.js"></script>
        <script type="text/javascript" src="js/barcodescanner.js"></script>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id="bg" class="svg"></div>
<!-- weiter Inhalt-->
</body>
</html>

Code: 
$(function() {
    var svg = $('#bg').find('svg');

    var w = svg.getAttribute('width').replace('px', '');
    var h = svg.getAttribute('height').replace('px', '');

    svg.removeAttribute('width');
    svg.removeAttribute('height');

    svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h);
    svg.setAttribute('preserveaspectratio', 'xminymin meet')

    $(svg)
        setAttribute('height', '100%')
        setAttribute('width', 'auto');

        var height = $(window).height();
        var width = $(window).width();
});
function formHandler2(form) {
if(ebeneTemp == "EG"){
     document.getElementById('bg').src = "img/ebene0.svg";
     $.get("img/ebene0.svg", null,
    function(data)
    {
      var svgNode = $("svg", data);
      var docNode = document.adoptNode(svgNode[0]);
      var pageNode = $(".svg");

      pageNode.html(docNode);
    },
    'xml');
}
 
Zuletzt bearbeitet:
Werbung:
Mal in die Konsole geschaut?

Hier sollte wahrscheinlich ein Error erscheinen, und außerdem werden Variablen width und height nirgends zugewiesen.

Code: 
$(svg)
        setAttribute('height', '100%')
        setAttribute('width', 'auto');
        var height = $(window).height();
        var width = $(window).width();
});
 
konsole sagt fehler bei svg.getAttribute is not a function
ja ich hab da iwie iwann den Überblick verloren, deswegen fragte ich ja um Hilfe >_>
Ich seh wahrscheinlich den Wald vor lauter Bäumen nich mehr...
 
Werbung:
Hier fehlt jeweils ein Punkt, und wenn schon jQuery, warum dann nicht konsequent? Eine JS-Methode auf ein jQuery-Objekt aufzurufen, funktioniert im Regelfall nicht.

Code: 
svg.attr('height', '100%')
   .attr('width', 'auto');
 
Falls aus dem oben genannten Grunde replace() nicht funzt, wirst du es wahrscheinlich über einen Zwischenschritt realisieren müssen. Ich habe das jetzt nicht ausprobiert.

Code: 
var w = svg.getAttribute('width');
w = w.replace('px', '');
 
hmm leider immer noch das selbe ergebnis.. ich sitz da seit ner woche dran und irgendwie steck ich glaub zu tief drin wodurch ich dummheitsfehler mache..
habs jetzt so:

Code: 
var svg = $('#bg').find('svg');

    var w = svg.getAttribute('width');
    w = w.replace('px', '');

    var h = svg.getAttribute('height');
    h = h.replace('px', '');


    svg.removeAttribute('width');
    svg.removeAttribute('height');

    svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h);
    svg.setAttribute('preserveaspectratio', 'xminymin meet')

    svg.attr('height', '100%')
       .attr('width', 'auto');


        var height = $(window).height();
        var width = $(window).width();
 
Werbung:
1. jQuery möglichst nicht mit vanilla JS mischen. Für getAttribute() gibt es attr() und für removeAttribute() gibt es removeAttr(). Findet man alles über Google.
2. Machen deine Variablen width und height immer noch nichts.
3. Die Konsole einsetzen, um zu sehen, wo es hängt.

Mehr könnte ich auch nicht tun.
 
ja ich weis, dass das unschön ist zu mischen, problem ist dass bei svg nicht alle funktionen greifen wie attr(), stattdessen sollte man getAttribute nehmen, so habe ich es zumindest bis jetz überall gelesen wenn ich nach meinem Problem gegoogelt hab. Mein Problem is auch, dass ich mich etwas mehr mit Jquery als mit dem reinen Javascript auskenne und ein Teil des Codes vorgegeben war.. nur eben halt in Javascript.. Ich werd mich heut Abend nochmal ransetzen und schauen wie ichs am blösten mache, falls iwas is melde ich mich nochmal :) also erst einmal danke für deine Hilfe
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben