nicht angemeldet
viewBox in SVG setzen
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
-
Hallo,
ich halte das für einen Bug. Auf jeden Fall funktioniert es, wenn du width und height auf ihren Standardwert setzt:svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");-
Achja: es funktioniert sogar, wenn du die Attribute nach dem Ändern entfernst…
-
ich halte das für einen Bug. Auf jeden Fall funktioniert es, wenn du width und height auf ihren Standardwert setzt:
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");Super, danke! Damit kann ich auf jeden Fall leben. Dann ist das Kapitel auch endlich abgeschlossen...
Liebe Grüße
Frederik
-