HTMLページに埋め込まれたSVGドキュメントを動的に変更しようとしているので、何らかのイベントが発生したとき(ボタンが押されたときなど)にデコレータを追加することがあります。
そのために、最初に「onload」中に SVG の「defs」要素にデコレータ イメージを挿入し、後でイベントの発生中に「use」要素を SVG グループに追加します。このコードは、onload 中のイメージ要素とイベント発生時の use 要素の両方を (Firefox で) 追加しているように見えますが、デコレータ イメージは表示されません。同じ SVG ドキュメントを永続化すると、すべてのブラウザで正しく表示されます。
簡単なコードを示します。ここに Phrogz のおかげで jsfiddle があります: http://jsfiddle.net/ewYkp/3/
次の html ページを想像してください。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Modification of SVG demo</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<script language="javascript">
var svgns = "http://www.w3.org/2000/svg";
function setOnLoad()
{
var svg = document.getElementById("SVG_IMAGE").contentDocument;
defs = svg.getElementsByTagName("defs");
def1 = defs[0];
var imageNote = document.SVG_IMAGE.contentDocument.createElementNS(svgns,"image");
imageNote.setAttribute("width","22");
imageNote.setAttribute("height","22");
imageNote.setAttribute("id","noteImage");
imageNote.setAttribute("xlink:href","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAaFJREFUOI2lk79LW1EUxz/vKZ1i4G2BZBI6FeLWdswQEnS3tDgZcFXI3xHFOrh0cElpKbg+EArJIhZBeEo6CU4vkC0Yn6nGvvd18OaZ99IM0guH++Pc7+cezjnXksT/jPn0wa/f59r52efookvg9wDIFHJUi3nqZYf3b5ashEBSbPvusexKQ6u7Lbmer8HNra4Ht3I9X6u7LdmVhvbdY01qEuJsrSnX8xVG0jCUsrWmsrWmhqEURZLr+crWmgkIkjjpeLIrjYQ4DRiGUmggdqWhk44nSViS+PC5LYBvmyVGEzl9ZTG1B/i01wbgx1bJmgc4uujyfbNENHE5t/E1Xve+rD3ly+zXS6/5aCA2QOD3eLvoIGDOlGYsSib8yd4tOnGFEmVUao5GD8iEPQdEKX8cQaaQ4/SqH78wvvD37p7wzz2WEY99p1d9MoXcM6BazHPQvpwKZTQIGA0CIiOU8R20L6kW88+Aetnh0D2j1ekSmdcyy9sxb2FlGwyk1ely6J5RLzvjxEw3UvCgf9rMRprVypPCWa1spX/jSz/TFOCl4xHBR4DBDtGdcgAAAABJRU5ErkJggg==");
def1.appendChild(imageNote);
};
function decorateSVG() {
var svg = document.getElementById("SVG_IMAGE");
var dElement = svg.contentDocument.getElementById("group1");
var useNote = svg.contentDocument.createElementNS(svgns,"use");
useNote.setAttribute("x","150");
useNote.setAttribute("y","150");
useNote.setAttribute("xlink:href","#noteImage");
dElement.appendChild(useNote);
};
</script>
</head>
<body>
<h1>Dynamic Modification of SVG demo - embed svg file with SVG image</h1>
<p> A yellow circle that was embeded using the svg "object" tag</p>
<object id="SVG_IMAGE" preserveAspectRatio="xMidYMid meet" data="basic_shapes_circle1.svg" width="400" y="0" x="0" type="image/svg+xml" onload="setOnLoad()">
</object>
<p>
<button onclick="decorateSVG('circle')">Decorate circle </button>
</p>
<hr>
</body>
</html>
および次の svg ドキュメント:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- A circle of radius 200 -->
<circle id="s1" cx="200" cy="200" r="200" fill="yellow" stroke="black" stroke-width="3"/>
</defs>
<g id="group1">
<use x="0" y="0" xlink:href="#s1"/>
</g>
</svg>
コード(おそらく)の結果は次のとおりです。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- A circle of radius 200 -->
<circle id="s1" cx="200" cy="200" r="200" fill="yellow" stroke="black" stroke-width="3"/>
<image width="22" height="22" id="noteImage" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAaFJREFUOI2lk79LW1EUxz/vKZ1i4G2BZBI6FeLWdswQEnS3tDgZcFXI3xHFOrh0cElpKbg+EArJIhZBeEo6CU4vkC0Yn6nGvvd18OaZ99IM0guH++Pc7+cezjnXksT/jPn0wa/f59r52efookvg9wDIFHJUi3nqZYf3b5ashEBSbPvusexKQ6u7Lbmer8HNra4Ht3I9X6u7LdmVhvbdY01qEuJsrSnX8xVG0jCUsrWmsrWmhqEURZLr+crWmgkIkjjpeLIrjYQ4DRiGUmggdqWhk44nSViS+PC5LYBvmyVGEzl9ZTG1B/i01wbgx1bJmgc4uujyfbNENHE5t/E1Xve+rD3ly+zXS6/5aCA2QOD3eLvoIGDOlGYsSib8yd4tOnGFEmVUao5GD8iEPQdEKX8cQaaQ4/SqH78wvvD37p7wzz2WEY99p1d9MoXcM6BazHPQvpwKZTQIGA0CIiOU8R20L6kW88+Aetnh0D2j1ekSmdcyy9sxb2FlGwyk1ely6J5RLzvjxEw3UvCgf9rMRprVypPCWa1spX/jSz/TFOCl4xHBR4DBDtGdcgAAAABJRU5ErkJggg=="/>
</defs>
<g id="group1">
<use x="0" y="0" xlink:href="#s1"/>
<use x="150" y="150" xlink:href="#noteImage"/>
</g>
</svg>
SVG ドキュメントをファイルに保存すると、どのブラウザでも正しく表示されます。ただし、メモリ内で変更すると機能しないようで、その理由がわかりません。何か案は?
よろしくお願いします。