SVG 요소의 온부하 이벤트에서 그려진 포인트는 렌더링 될 때 표시되지 않습니다.
-
06-07-2019 - |
문제
JavaScript를 사용하여 SVG 그리드를 그리기 위해 노력하고 있습니다. 나는 축을 끌어 당겼다. 그러나 동적 포인트를 추가하는 문제가 발생합니다.
SVG 요소의 Onload 이벤트에서 포인트를 그려 보려고합니다. Firebug를 사용할 때 내 포인트를 나타내는 원 요소가 위치, 브러시 스트로크 등에 대한 올바른 속성으로 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 Debugging Extension에 의해 표시된 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