Chromium と Firefox で正常に動作するこのコードがありますが、Opera は画像データを処理できないため、load イベントを発生させません。データを通常の jpeg に設定すると正常に動作しますが、svg では動作しません。修正はありますか？
var img = new Image();
var that = this;
img.onload = function(){ onCacheCreated.call( that, img ); }
img.src = "data:image/svg+xml;base64,"
+ btoa( ( new XMLSerializer() ).serializeToString( this._dom ) );
うーん、ここでは非常に興味深い範囲の行動が見られます。
特に興味深いのは、実際にSVG をロードできることです。base64でエンコードされた文字列が追加されたもの"data:image/svg+xml;base64,"
と、プレーンテキストが追加されたものの両方として試しました"data:image/svg+xml,"
「きちんとした」部分は、 onload イベントが発生しないことです。ただし、img 要素を作成してページに追加すると、読み込み時に表示されます。しかし、ここでも、onload イベントは発生しませんでした。
さらに奇妙なことに、透明な影、グラデーション、ぼかしのあるロゴを使用すると、グラデーション、ぼかし、影が機能しませんが、プレーンテキストとして送信された場合のみです。
見知らぬ人が繰り返しますが、Chrome では両方が同じように表示され、IE9 では base64 バージョンのみが表示され、Opera では両方が表示されますが、外観が大きく異なります。
おそらく、インターバルタイマーを設定してから、読み込まれている img 要素のサイズを確認できます。ロードの前後でそれらは異なると思われます。これが (起動されない) onload イベントを処理するための実行可能な代替手段になるかどうかを確認する必要があります。
使用したコードは次のとおりです。
<!DOCTYPE>
<html>
<head>
<style>
</style>
<script>
function myInit()
{
var img = new Image();
document.body.appendChild(img);
var imgStr = "data:image/svg+xml;base64,";
imgStr += "PHN2ZwogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9Ijg1IgogICBoZWlnaHQ9Ijg1Igo+CiAgPGRlZnMKICAgICBpZD0iZGVmczQxNzIiPgogICAgPHJhZGlhbEdyYWRpZW50CiAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICB4bGluazpocmVmPSIjbGluZWFyR3JhZGllbnQ0ODk5IgogICAgICAgaWQ9InJhZGlhbEdyYWRpZW50NDkwNyIKICAgICAgIGN4PSIyMTkuNjM0MzIiCiAgICAgICBjeT0iNTMuNDk5Mjc5IgogICAgICAgZng9IjIxOS42MzQzMiIKICAgICAgIGZ5PSI1My40OTkyNzkiCiAgICAgICByPSIxNS44OTA2MjUiCiAgICAgICBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0zLjI3ODMwMzMsLTAuNzI4NTMzODUsMC42OTk5NTM0NCwtMy4xNDk2OTU0LDczOS4xNzMyMSwzNDUuMzE5OTUpIgogICAgICAgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIC8+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlkPSJsaW5lYXJHcmFkaWVudDQ4OTkiPgogICAgICA8c3RvcAogICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwO3N0b3Atb3BhY2l0eToxOyIKICAgICAgICAgb2Zmc2V0PSIwIgogICAgICAgICBpZD0ic3RvcDQ5MDEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNmN2I0YjQ7c3RvcC1vcGFjaXR5OjE7IgogICAgICAgICBvZmZzZXQ9IjEiCiAgICAgICAgIGlkPSJzdG9wNDkwMyIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHhsaW5rOmhyZWY9IiNsaW5lYXJHcmFkaWVudDQ5MTQiCiAgICAgICBpZD0ibGluZWFyR3JhZGllbnQ0OTIwIgogICAgICAgeDE9IjIxNi43MTc0NSIKICAgICAgIHkxPSItNTIuMDQ4NTUzIgogICAgICAgeDI9IjIxNS44MDM0NyIKICAgICAgIHkyPSI4NS4xNDE1MjUiCiAgICAgICBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgICAgIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE2NS4yNTk1MSwtMTUuOTQ2NDM5KSIgLz4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICAgaW5rc2NhcGU6Y29sbGVjdD0iYWx3YXlzIgogICAgICAgaWQ9ImxpbmVhckdyYWRpZW50NDkxNCI+CiAgICAgIDxzdG9wCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNmZmZmZmY7c3RvcC1vcGFjaXR5OjE7IgogICAgICAgICBvZmZzZXQ9IjAiCiAgICAgICAgIGlkPSJzdG9wNDkxNiIgLz4KICAgICAgPHN0b3AKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2ZmZmZmZjtzdG9wLW9wYWNpdHk6MDsiCiAgICAgICAgIG9mZnNldD0iMSIKICAgICAgICAgaWQ9InN0b3A0OTE4IiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxmaWx0ZXIKICAgICAgIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIGlkPSJmaWx0ZXI1MDk2Ij4KICAgICAgPGZlR2F1c3NpYW5CbHVyCiAgICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgICAgc3RkRGV2aWF0aW9uPSIwLjU1NjQ1NjM3IgogICAgICAgICBpZD0iZmVHYXVzc2lhbkJsdXI1MDk4IiAvPgogICAgPC9maWx0ZXI+CiAgICA8ZmlsdGVyCiAgICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICBpZD0iZmlsdGVyNTA3NiI+CiAgICAgIDxmZUdhdXNzaWFuQmx1cgogICAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICAgIHN0ZERldmlhdGlvbj0iMS4yNTA3OTMzIgogICAgICAgICBpZD0iZmVHYXVzc2lhbkJsdXI1MDc4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDQ5MjIiCiAgICAgICBkPSJtIDIzLjc3MDQ2Nyw1MC42ODQxNTEgYyAtMTYuNzUxNzcwMiwyLjA0NzggLTI0LjM4NTkyMDIzLDExLjExMTMgLTE3LjA4NDI5MDIsMjAuMjM1NSA3LjMwMTYyMDIsOS4xMjQxIDI2Ljc3ODgwMDIsMTQuODU5NyA0My41MzA1NzAyLDEyLjgxMiAxNi43NTE3NywtMi4wNDc3IDI0LjQyNzMsLTExLjEwMjQgMTcuMTI1NjgsLTIwLjIyNjYgLTcuMzAxNjMsLTkuMTI0MiAtMjYuODIwMTksLTE0Ljg2ODYgLTQzLjU3MTk2LC0xMi44MjA5IHogbSAwLjcxOTcsMC44OTk0IGMgOC43NjMzNCwtMS4wNzEyIDIxLjQ5MjUsNS4wNDYzIDI4LjQwNDYyLDEzLjY3MzcgbCAtMTUuODk2MTEsMS45NTcgMTUuOTA2MjUsLTEuOTQ0NCBjIDYuOTA4ODksOC42MzM0IDUuMzcwNzYsMTYuNTAzMyAtMy4zOTc3NCwxNy41NzUxIC04Ljc2ODUsMS4wNzE5IC0yMS40NzQ2MiwtNS4wNTY3IC0yOC4zODM1MSwtMTMuNjkwMSAtNi45MDg4OSwtOC42MzM1IC01LjQwMjAxLC0xNi40OTk1IDMuMzY2NDksLTE3LjU3MTMgeiIKICAgICAgIHN0eWxlPSJvcGFjaXR5OjAuMzE4NTg0MDc7ZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO2ZpbHRlcjp1cmwoI2ZpbHRlcjUwNzYpIgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgICAgZD0ibSA1MC4zNjU0OTcsMi41MjIzMDA2IGMgLTE2Ljc1MTc3LDAgLTMwLjMxMjUsMTguMjcxMDcwNCAtMzAuMzEyNSw0MC43ODEyNTA0IDAsMjIuNTEwMiAxMy41NjA3Myw0MC43NSAzMC4zMTI1LDQwLjc1IDE2Ljc1MTc3LDAgMzAuMzQzNzUsLTE4LjIzOTggMzAuMzQzNzUsLTQwLjc1IDAsLTIyLjUxMDE4IC0xMy41OTE5OCwtNDAuNzgxMjUwNCAtMzAuMzQzNzUsLTQwLjc4MTI1MDQgeiBtIDAsMi4yMTg3NSBjIDguNzYzMzQsMCAxNS44OTg5NSwxNy4yNDQzOTA0IDE1LjkwNjI1LDM4LjUzMTMwMDQgbCAtMTUuOTA2MjUsMC4wMzEgMTUuOTA2MjUsMCBjIDAsMjEuMjk5NCAtNy4xMzc3NSwzOC41NjI1IC0xNS45MDYyNSwzOC41NjI1IC04Ljc2ODUsMCAtMTUuODc1LC0xNy4yNjMxIC0xNS44NzUsLTM4LjU2MjUgMCwtMjEuMjk5NDYgNy4xMDY1LC0zOC41NjI1NTA0IDE1Ljg3NSwtMzguNTYyNTUwNCB6IgogICAgICAgaWQ9InBhdGg0ODg3IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDp1cmwoI3JhZGlhbEdyYWRpZW50NDkwNyk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBkPSJtIDUwLjM2NTQ5Nyw0Ljc0MTA1MDYgYyAtOC43Njg1LDAgLTE1Ljg3NSwxNy4yNjMwOTA0IC0xNS44NzUsMzguNTYyNTAwNCAwLDIxLjI5OTQgNy4xMDY1LDM4LjU2MjUgMTUuODc1LDM4LjU2MjUgOC43Njg1LDAgMTUuOTA2MjUsLTE3LjI2MzEgMTUuOTA2MjUsLTM4LjU2MjUgbCAtMi4zNzUsMCBjIDAsMjAuMjg1MyAtNi4wNzE0OCwzNi43MTg4IC0xMy41MzEyNSwzNi43MTg4IC03LjQ1OTc3LDAgLTEzLjUsLTE2LjQzMzUgLTEzLjUsLTM2LjcxODggMCwtMjAuMjg1MzQgNi4wNDAyMywtMzYuNzUwMDAwNCAxMy41LC0zNi43NTAwMDA0IDcuNDU1MzgsMCAxMy41MjUwNCwxNi40NDUzNzA0IDEzLjUzMTI1LDM2LjcxODgwMDQgbCAyLjM3NSwwIGMgLTAuMDA3LC0yMS4yODY5MSAtNy4xNDI5MSwtMzguNTMxMzAwNCAtMTUuOTA2MjUsLTM4LjUzMTMwMDQgeiIKICAgICAgIGlkPSJwYXRoNDg5MSIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6dXJsKCNsaW5lYXJHcmFkaWVudDQ5MjApO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO2ZpbHRlcjp1cmwoI2ZpbHRlcjUwOTYpIgogICAgICAgZD0ibSA1MC4zNjU0OTcsMi41MjIzMDA2IGMgLTE2Ljc1MTc3LDAgLTMwLjMxMjUsMTguMjcxMDcwNCAtMzAuMzEyNSw0MC43ODEyNTA0IDAsMi42Mzc5IDAuMjA2NzMsNS4yMjA2IDAuNTYyNSw3LjcxODggNC41MDE2NCwzLjg3NTMgOS43MTMwOSw2LjkwODIgMTUuNDM3NSw4LjgxMjUgLTAuOTgzODQsLTUuMDE4MSAtMS41NjI1LC0xMC42MDI0IC0xLjU2MjUsLTE2LjUzMTMgMCwtMjEuMjk5NDEgNy4xMDY1LC0zOC41NjI1MDA0IDE1Ljg3NSwtMzguNTYyNTAwNCA4Ljc2MzM0LDAgMTUuODk4OTUsMTcuMjQ0MzkwNCAxNS45MDYyNSwzOC41MzEzMDA0IGwgLTE1LjkwNjI1LDAuMDMxIDE1LjkwNjI1LDAgYyAwLDUuOTI3NiAtMC41NDQzMSwxMS41MTM5IC0xLjUzMTI1LDE2LjUzMTIgNS43MTYzNiwtMS45MDQ2IDEwLjk0MTI3LC00Ljk0MTggMTUuNDM3NSwtOC44MTI1IDAuMzU2NTMsLTIuNDk4MSAwLjUzMTI1LC01LjA4MDggMC41MzEyNSwtNy43MTg3IDAsLTIyLjUxMDIzIC0xMy41OTE5OCwtNDAuNzgxMzAwNCAtMzAuMzQzNzUsLTQwLjc4MTMwMDQgeiIKICAgICAgIGlkPSJwYXRoNDkwOSIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+CiAgPC9nPgo8L3N2Zz4K";
img.src = imgStr;
img = new Image();
document.body.appendChild(img);
var imgStr = "data:image/svg+xml,";
imgStr += '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="85" height="85"> <defs id="defs4172"> <radialGradient inkscape:collect="always" xlink:href="#linearGradient4899" id="radialGradient4907" cx="219.63432" cy="53.499279" fx="219.63432" fy="53.499279" r="15.890625" gradientTransform="matrix(-3.2783033,-0.72853385,0.69995344,-3.1496954,739.17321,345.31995)" gradientUnits="userSpaceOnUse" /> <linearGradient id="linearGradient4899"> <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop4901" /> <stop style="stop-color:#f7b4b4;stop-opacity:1;" offset="1" id="stop4903" /> </linearGradient> <linearGradient inkscape:collect="always" xlink:href="#linearGradient4914" id="linearGradient4920" x1="216.71745" y1="-52.048553" x2="215.80347" y2="85.141525" gradientUnits="userSpaceOnUse" gradientTransform="translate(-165.25951,-15.946439)" /> <linearGradient inkscape:collect="always" id="linearGradient4914"> <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0" id="stop4916" /> <stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop4918" /> </linearGradient> <filter color-interpolation-filters="sRGB" inkscape:collect="always" id="filter5096"> <feGaussianBlur inkscape:collect="always" stdDeviation="0.55645637" id="feGaussianBlur5098" /> </filter> <filter color-interpolation-filters="sRGB" inkscape:collect="always" id="filter5076"> <feGaussianBlur inkscape:collect="always" stdDeviation="1.2507933" id="feGaussianBlur5078" /> </filter> </defs> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <path id="path4922" d="m 23.770467,50.684151 c -16.7517702,2.0478 -24.38592023,11.1113 -17.0842902,20.2355 7.3016202,9.1241 26.7788002,14.8597 43.5305702,12.812 16.75177,-2.0477 24.4273,-11.1024 17.12568,-20.2266 -7.30163,-9.1242 -26.82019,-14.8686 -43.57196,-12.8209 z m 0.7197,0.8994 c 8.76334,-1.0712 21.4925,5.0463 28.40462,13.6737 l -15.89611,1.957 15.90625,-1.9444 c 6.90889,8.6334 5.37076,16.5033 -3.39774,17.5751 -8.7685,1.0719 -21.47462,-5.0567 -28.38351,-13.6901 -6.90889,-8.6335 -5.40201,-16.4995 3.36649,-17.5713 z" style="opacity:0.31858407;fill:#000000;fill-opacity:1;stroke:none;filter:url(#filter5076)" inkscape:connector-curvature="0" /> <path style="fill:#ff0000;fill-opacity:1;stroke:none" d="m 50.365497,2.5223006 c -16.75177,0 -30.3125,18.2710704 -30.3125,40.7812504 0,22.5102 13.56073,40.75 30.3125,40.75 16.75177,0 30.34375,-18.2398 30.34375,-40.75 0,-22.51018 -13.59198,-40.7812504 -30.34375,-40.7812504 z m 0,2.21875 c 8.76334,0 15.89895,17.2443904 15.90625,38.5313004 l -15.90625,0.031 15.90625,0 c 0,21.2994 -7.13775,38.5625 -15.90625,38.5625 -8.7685,0 -15.875,-17.2631 -15.875,-38.5625 0,-21.29946 7.1065,-38.5625504 15.875,-38.5625504 z" id="path4887" inkscape:connector-curvature="0" /> <path style="fill:url(#radialGradient4907);fill-opacity:1;stroke:none" d="m 50.365497,4.7410506 c -8.7685,0 -15.875,17.2630904 -15.875,38.5625004 0,21.2994 7.1065,38.5625 15.875,38.5625 8.7685,0 15.90625,-17.2631 15.90625,-38.5625 l -2.375,0 c 0,20.2853 -6.07148,36.7188 -13.53125,36.7188 -7.45977,0 -13.5,-16.4335 -13.5,-36.7188 0,-20.28534 6.04023,-36.7500004 13.5,-36.7500004 7.45538,0 13.52504,16.4453704 13.53125,36.7188004 l 2.375,0 c -0.007,-21.28691 -7.14291,-38.5313004 -15.90625,-38.5313004 z" id="path4891" inkscape:connector-curvature="0" /> <path style="fill:url(#linearGradient4920);fill-opacity:1;stroke:none;filter:url(#filter5096)" d="m 50.365497,2.5223006 c -16.75177,0 -30.3125,18.2710704 -30.3125,40.7812504 0,2.6379 0.20673,5.2206 0.5625,7.7188 4.50164,3.8753 9.71309,6.9082 15.4375,8.8125 -0.98384,-5.0181 -1.5625,-10.6024 -1.5625,-16.5313 0,-21.29941 7.1065,-38.5625004 15.875,-38.5625004 8.76334,0 15.89895,17.2443904 15.90625,38.5313004 l -15.90625,0.031 15.90625,0 c 0,5.9276 -0.54431,11.5139 -1.53125,16.5312 5.71636,-1.9046 10.94127,-4.9418 15.4375,-8.8125 0.35653,-2.4981 0.53125,-5.0808 0.53125,-7.7187 0,-22.51023 -13.59198,-40.7813004 -30.34375,-40.7813004 z" id="path4909" inkscape:connector-curvature="0" /> </g></svg>';
img.src = imgStr;
}
</script>
</head>
<body onload='myInit();'>
</body>
</html>