Frederik: viewBox in SVG setzen

Beitrag lesen

SELF-Forum

viewBox in SVG setzen

Frederik
– Informationen zu den Bewertungsregeln

Hallo!

Gerade bin ich dabei, ein Greasemonkey-/UserScript für openclipart.org zu schreiben. Dabei möchte ich den SVG-Cliparts eine viewBox hinzufügen, damit sie auf die für das object-Element angegebene Größe verkleinert werden.

Im Opera funktioniert dies auch schon sehr gut. Leider spielt der Firefox aber noch nicht ganz mit.

Hier mal das vollständige Skript:

  
// ==UserScript==  
// @include http://openclipart.org/*  
// ==/UserScript==  
  
var SHRINK_PREVIEW = 1;  
  
(function (ev) {  
    var imgs = document.getElementsByTagName("img");  
    for (var i=0; i<imgs.length; i++) {  
        var ref = imgs[i].src;  
        var sty = imgs[i].getAttribute("style");  
        var cla = imgs[i].getAttribute("class");  
        if (ref.match(/.svg$/)) {  
            var obj = document.createElement("object");  
            obj.setAttribute("data", ref);  
            obj.setAttribute("type", "image/svg+xml");  
            obj.setAttribute("class", cla);  
  
            if (SHRINK_PREVIEW == 1) {  
                obj.setAttribute("style", sty);  
                obj.addEventListener("load",  
                    function (ev) {  
                        var svgdoc = this.contentDocument;  
                        var svg = svgdoc.documentElement;  
                        var vb = svg.getAttribute("viewBox");  
                        if (vb === null) {  
                            var wid = svg.getAttribute("width");  
                            var hei = svg.getAttribute("height");  
                            svg.removeAttribute("width");  
                            svg.removeAttribute("height");  
                            svg.setAttribute("viewBox", "0 0 " + wid + " " + hei);  
                        }  
                    }  
                , false);  
            }  
  
            var par = imgs[i].parentNode;  
            par.replaceChild(obj, imgs[i]);  
  
        }  
    }  
})();

Um das Verhalten von Firefox mal näher zu untersuchen, habe ich ein normales SVG eingebunden, das sich so verhält, wie ich möchte (also verkleinert wird), und ein zweites per JavaScript so verändert, dass es eigentlich dem ersten entsprechen sollte.

Hier die Testseite:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>SVG in HTML</title>  
<script type="text/javascript">  
function resize () {  
            var obj = document.getElementsByTagName("object")[0];  
  
                        var svgdoc = obj.contentDocument;  
                        var svg = svgdoc.documentElement;  
                        var vb = svg.getAttribute("viewBox");  
                        if (vb === null) {  
                            var wid = svg.getAttribute("width");  
                            var hei = svg.getAttribute("height");  
                            svg.removeAttribute("width");  
                            svg.removeAttribute("height");  
                            svg.setAttribute("viewBox", "0 0 " + wid + " " + hei);  
                        }  
                    }  
</script>  
</head>  
<body onload="resize();">  
<p>SVG in object:</p>  
<object data="smiley.svg" type="image/svg+xml" width="100" height="100">  
SVG in object kann nicht angezeigt werden!  
</object>  
<object data="smiley2.svg" type="image/svg+xml" width="100" height="100">  
SVG in object kann nicht angezeigt werden!  
</object>  
</body>  
</html>

Die eingebundene smiley.svg findet man hier: http://www-user.uni-bremen.de/~felwert/smiley.svg

Die smiley2.svg unterscheidet sich nur in den Attributen des Wurzelelements:

<svg  
   xmlns="http://www.w3.org/2000/svg"  
   xmlns:xlink="http://www.w3.org/1999/xlink"  
   id="svg1534"  
   y="0.00000000"  
   x="0.00000000"  
   viewBox="0 0 150 150"  
   version="1.0">

Eigentlich hätte ich erwartet, dass sich die beiden SVGs nach der DOM-Manupulation gleichen sollten. In Opera werden sie auch gleich angezeigt. Im Firefox jedoch wird das erste SVG nicht verkleinert, das zweite jedoch schon.

Hat vielleicht jemand eine Ahnung, woran das liegen könnte? Habe ich etwas übersehen? Oder verhält sich der Firefox merkwürdig?

Liebe Grüße
Frederik

Beitrag melden
–
Informationen zu den Bewertungsregeln