JS 조작

자바스크립트를 사용한 기본적인 SVG 변경 방법을 몇 가지 설명하고자 합니다. SVG 파일에 스크립트를 포함시키려면 파싱 오류를 방지하기 위해 <[!][CDATA [...]]>에 안에 코드를 작성해야 합니다. <img> 또는 background-image에 보안을 적용하면 스크립트가 실행되지 않습니다. (페이지 내부에 잠재적 악성 코드 실행을 방지하기 위해)

외부 JS로 작업 할 때 (SVG 파일 내 코드를 삽입하지 않고) SVG가 인라인으로 HTML 문서 안에 내장되어 있으면, 다른 DOM요소처럼 타켓팅 할 수 있습니다. <object>를 사용하는 경우 contentDocument로 타겟팅 할 수 있습니다. 아래 예제보다 더 멋진 작품을 만들어 보세요.


외부 스크립트

window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("firstb");
  var svgb2 = svgDocument.getElementsByClassName("secondb");
  svgb1[0].setAttribute("fill", "yellow");
  svgb2[0].setAttribute("fill", "red");
};