Ook inline SVG in Opera. Er komt wel een script aan te pas om dit mogelijk te maken, maar zonder gebruik van een externe svg-file, laten alle moderne browsers dit simpele circeltje op het scherm zien... Oude IE browsers gebruiken de VML en IE9 heeft een iets aangepaste code. Maar voor de rest gebruiken alle (strict) browsers dezelfde code. Wat de oude IE-browsers aangaat moet je natuurlijk de xml:namespace (en andere ellende) op jouw pagina plaatsen. Kijk even in de broncode van deze pagina welke code je moet gebruiken. Het is makkelijk te vinden. Kijk even welke code er staat bij de <!--[if lt IE 9]>. Om de procedure te laten werken moet je ergens een place-holder op de pagina neerzetten. Op een willekeurige plek in de body-sectie moet je
<p id="place_holder_voor_inline_svg"></p>
plaatsen. En natuurlijk dient het script (zie hieronder) ook een plaats te krijgen in de body-sectie van de pagina. Op de laatste regel van het script heb ik al een voorzetje gegeven voor de parameter-verwerking van de procedure. In de regel
maak_inline_svg_voor(['0', '300']);
verwijzen de twee getallen naar de variabelen verder in de procedure. cross_browser_inline_svg[0] en cross_browser_inline_svg[1] bepalen op drie plaatsen in het script de positie van de cirkel. Ik denk dat het duidelijk is dat de (eventuele) volgende variabele (in de laatste regel van het script) dan cross_browser_inline_svg[2] wordt... Voor het overige is er nog te melden dat het script foutloos is volgens de strenge JSLint-norm, en dat de css en html valideert op de W3C-manier.
<script>
/*global window: false */
/*global navigator: false */
/*global document: false */
var ie_browser = {
browser_versie: function() {
var de_versie = 999;
if (navigator.appVersion.indexOf("MSIE") !== -1) {
de_versie = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return de_versie;
}
};
function maak_voor_ie(cross_browser_inline_svg) {
var roundRect = document.createElement('v:roundrect');
roundRect.style.width=80;
roundRect.style.height=80;
roundRect.setAttribute('fillcolor', '#f00');
roundRect.setAttribute('arcsize', '50%');
var inline_svg = document.getElementById('place_holder_voor_inline_svg');
inline_svg.style.position = "absolute";
inline_svg.style.top = cross_browser_inline_svg[0] + "px";
inline_svg.style.left = cross_browser_inline_svg[1] + "px";
inline_svg.appendChild(roundRect);
}
function maak_voor_opera(cross_browser_inline_svg) {
var svg_strict = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="' + (1000) + 'px" height="' + (1000) + 'px"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> ';
var vertaal_de_data = window.btoa(svg_strict);
var inline_svg = document.getElementById('place_holder_voor_inline_svg');
inline_svg.style.position = "absolute";
inline_svg.style.top = cross_browser_inline_svg[0] + "px";
inline_svg.style.left = cross_browser_inline_svg[1] + "px";
var svg_strict_compact='<img src="data:image/svg+xml;base64,' + vertaal_de_data + '" />';
inline_svg.innerHTML = svg_strict_compact;
}
function maak_voor_ie9(cross_browser_inline_svg) {
var svg_ie9 = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> ';
var inline_svg = document.getElementById('place_holder_voor_inline_svg');
inline_svg.style.position = "absolute";
inline_svg.style.top = cross_browser_inline_svg[0] + "px";
inline_svg.style.left = cross_browser_inline_svg[1] + "px";
inline_svg.innerHTML = svg_ie9;
}
var de_user_agent = navigator.userAgent.toLowerCase();
function maak_inline_svg_voor(cross_browser_inline_svg) {
if ((!window.opera && de_user_agent.indexOf("msie") !== -1) && (ie_browser.browser_versie() < 9)) {
maak_voor_ie(cross_browser_inline_svg);
} else if (window.opera) {
maak_voor_opera(cross_browser_inline_svg);
}
else if ((!window.opera && de_user_agent.indexOf("msie") !== -1) && (ie_browser.browser_versie() > 8)) {
maak_voor_ie9(cross_browser_inline_svg);
}
else {
maak_voor_opera(cross_browser_inline_svg); // en voor de rest van alle strict browsers
}
}
window.onload = function() {
maak_inline_svg_voor(['0', '300']);
};
</script>