SVG 요소의 온부하 이벤트에서 그려진 포인트는 렌더링 될 때 표시되지 않습니다.

StackOverflow https://stackoverflow.com/questions/263902

  •  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의 튜토리얼 특히 여기.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top