SVG要素のonloadイベントで描画されたポイントは、レンダリング時に表示されません
-
06-07-2019 - |
質問
Javascriptを使用してSVGグリッドの描画に取り組んでいます。象限ラベルだけでなく、軸を描画することができました。ただし、動的ポイントの追加で問題が発生しました。
SVG要素のonloadイベントにポイントを描画しようとしています。 Firebugを使用すると、ポイントを表すcircle要素が、位置、ブラシストロークなどに設定された正しい属性を使用してSVG DOMに追加されていることを確認できました。
残念ながら、ブラウザ(Firefox 3)でレンダリングされた実際の画像は、これらの新しいDOM要素を追加したという事実を反映して更新されません!
以下は、正しいDOMノードに要素を追加するために使用するコードです。
function drawPoints()
{
var points = pointCollection.points;
var grid = SVGDoc.getElementById("gridGroup");
for(var i = 0 in points)
{
var x = points[i].x;
var y = points[i].y;
var label = points[i].event;
//<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
var dot = SVGDoc.createElement("circle");
dot.setAttribute("cx", x);
dot.setAttribute("cy", y);
dot.setAttribute("r", 15);
dot.setAttribute("stroke", "red");
dot.setAttribute("stroke-width", "2");
dot.setAttribute("fill", "black");
grid.appendChild(dot);
}
}
FirefoxのFirebugデバッグ拡張機能によって示される、その後のSVG構造は次のとおりです。
<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg" onload="init(evt); drawAxis(); drawPoints()">
<g id="gridGroup" stroke="green">
<line id="xAxis" x1="0" x2="800" y1="400" y2="400" stroke-width="2"/>
<line id="yAxis" x1="400" x2="400" y1="0" y2="800" stroke-width="2"/>
<text id="importantLabel" x="155" y="20" font-family="Verdana" font-size="18" fill="blue" onclick="drawPoints()">Important</text>
<text id="notImportantLabel" x="555" y="20" font-family="Verdana" font-size="18" fill="blue">Not-Important</text>
<text id="urgentLabel" x="20" y="200" font-family="Verdana" font-size="18" fill="blue" transform="rotate(-90, 20, 200)">Urgent</text>
<text id="notUrgentLabel" x="20" y="600" font-family="Verdana" font-size="18" fill="blue" transform="rotate(-90, 20, 600)">Not-Urgent</text>
<circle cx="30" cy="30" r="15" stroke="red" stroke-width="2" fill="black"/>
<circle cx="600" cy="600" r="15" stroke="red" stroke-width="2" fill="black"/>
<circle cx="400" cy="400" r="15" stroke="red" stroke-width="2" fill="black"/>
</g>
</svg>
ご協力いただければ幸いです。私はSVG初心者です!
解決
SVG要素を動的に作成するには、適切なネームスペースで createElementNS
メソッドを使用する必要があります(例:
var dot = SVGDoc.createElementNS("http://www.w3.org/2000/svg", "circle");
詳細については、 Kevin Lindsayのチュートリアル、特にこちら。
所属していません StackOverflow