[javascript] 자바 스크립트로 HTML 문서에 임베드 된 SVG 문서를 조작 할 수 있습니까?



Answers

상황은 실제로 예상보다 간단합니다. 컨셉을 이해하기 위해서는 복잡한 튜토리얼을 읽을 필요가 없으며 JQuery를 사용하지 않아도된다. 다음은 기본 레이아웃입니다.

  • HTML 문서의 JavaScript 함수입니다.

    <script type="text/javascript">
    function change(){
        var s=document.getElementById("cube");
        s.setAttribute("stroke","0000FF");
    }
    </script>
  • 우리가 조작하려고하는 SVG 요소.

    <svg width=100 height=100 style='float: left;'>
      <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C />
    </svg>
  • 변경을 방아쇠하는 인라인 버튼. 예제에서 큐브 자체를 클릭하여 이벤트를 트리거 할 수도 있습니다.

    <button onclick="change()">Click</button>
Question

나는 데이터 그래프를보기 위해 미니 애플리케이션과 같은 SVG 이미지를 만들었다. 이것을 HTML 페이지에 포함시키고 SVG 이미지의 메서드를 호출하려고합니다.

예:

<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>

SVG 문서의 메서드를 호출 할 수 있습니까? 그렇다면 SVG 파일에 표시 할 메소드를 선언하려면 어떻게해야하며 HTML 문서에서 메소드를 호출하려면 어떻게해야합니까?










Links