SVG javascript 스크립트

JavaScript를 사용하여 SVG 스크립트를 작성할 수 있습니다. 스크립트를 통해 SVG 요소를 수정하고, 애니메이션을 설정하거나 형상에 대한 마우스 이벤트를 듣을 수 있습니다. SVG가 HTML 페이지에 내부적으로 삽입되면, JavaScript에서 SVG 요소를 사용할 수 있습니다.

SVG 스크립트를 작성할 수 있습니다. 스크립트를 작성하면 SVG 요소를 수정하고, 그들의 애니메이션을 설정하거나, 형상에 대한 마우스 이벤트를 감지할 수 있습니다.

SVG가 HTML 페이지에 내장되면 JavaScript에서 SVG 요소를 사용할 수 있습니다. JavaScript는 같습니다.

이 문서는 JavaScript를 사용하여 SVG 요소를 처리하는 예제를 보여줍니다. 그러나 JavaScript 자체를 설명하지는 않습니다. 이 문서의 예제를 이해하기 위해 JavaScript에 대한 기본적인 이해가 필요합니다.

SVG 스크립트 예제

이는 버튼을 클릭하면 SVG 사각형의 크기를 변경하는 간단한 SVG 스크립트 작성 예제입니다.

<svg　width="500"　height="100">
　　　　<rect id="rect1" x="10" y="10" width="50" height="80"
　　　　　　　　　　style="stroke:#000000; fill:none;"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
　　　　　　　　　　　　onclick="changeDimensions()"/>
<script>
　　　　function changeDimensions() {
　　　　　　　　document.getElementById("rect1).setAttribute("width", "10);
　　　　}
</script>

버튼을 클릭하여 어떤 일이 일어날지 확인하세요。

ID를 통해 SVG 요소에 대한 참조를 얻는 방법

SVG 형상에 대한 참조를 얻기 위해 document.getElementById() 함수를 사용할 수 있습니다. 예제를 보면 다음과 같습니다：

var svgElement = document.getElementById("rect1");

이 예제는 ID가 rect인1의 SVG 요소의 참조(ID는 SVG 요소의 id 속성에 지정됩니다).

속성 값 변경

SVG 요소의 참조를 얻으면 setAttribute() 함수를 사용하여 속성을 변경할 수 있습니다. 예제를 보면 다음과 같습니다：

var svgElement = document.getElementById("rect1);svgElement.setAttribute("width", "10);

이 예제는 선택된 SVG 요소의 width 속성을 설정합니다. setAttribute() 함수를 사용하여 다른 속성을 설정할 수 있습니다. style 속성도 포함됩니다.

getAttribute() 함수를 사용하여 속성 값을 얻을 수도 있습니다. 예제를 보면 다음과 같습니다：

var svgElement = document.getElementById("rect1);var width = svgElement.getAttribute("width");

CSS 속성 변경

SVG 요소의 style 속성을 참조하여 주어진 CSS 속성을 사용하면 SVG 요소의 CSS 속성을 변경할 수 있습니다. 아래는 stroke CSS 속성을 설정하는 예제입니다：

var svgElement = document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";

이렇게 하면 어떤 다른 CSS 속성도 설정할 수 있습니다. 이름을 svgElement.style.의 두 번째 줄 뒤에 두고, 어떤 값으로 설정하면 됩니다.

style 속성을 통해 CSS 속성의 값을 읽을 수도 있습니다. 예제를 보겠습니다：

var svgElement = document.getElementById("rect1");
var stroke = svgElement.style.stroke;

이 예제는 stroke CSS 속성의 값을 읽습니다.

이름에 부호를 포함한 CSS 속성 이름(예: stroke-width)는 [''] 구조를 통해 참조되어야 합니다. 이렇게 하는 이유는 반점으로 시작된 속성 이름이 JavaScript에서 무효하기 때문입니다. 따라서 다음과 같이 쓸 수 없습니다

element.style.stroke-width

반대로, 다음과 같이 작성해야 합니다

element.style['stroke-width"]

이렇게 하면, 이름에 부호를 사용하여 CSS 속성을 참조할 수도 있습니다.

이벤트 리스너

SVG에 이벤트 리스너를 SVG 형상에 직접 추가할 수 있습니다. HTML 요소와 같이 작업을 수행하세요. onmouseover 및 onmouseout 이벤트 리스너를 추가하는 예제를 보겠습니다：

<svg　width="500"　height="100">　　　　
<rect x="10" y="10" width="100" height="75"　　　　
style="stroke: #000000; fill: #eeeeee;"　　　　
onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] =　5;"　　　　
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] =　1;"　　　　
/>　　　　
</svg>

이 예제는 마우스가 다각형에 올라갈 때 터치 색상과 터치 너비를 변경하고, 마우스가 다각형에서 벗어날 때 터치 색상과 터치 너비를 원상복구합니다. 아래 예제를 시도해 보세요. 형상에 마우스를 가져가고 다시 벗어나 이벤트 리스너의 효과를 확인하세요。

addEventListener() 함수를 사용하여 SVG 요소에 이벤트 리스너를 추가할 수 있습니다. 예제를 보겠습니다：

var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("이벤트가 발생했습니다!");
}

이 예제는 MouseOver 이벤트에 이름이 MouseOver인 이벤트 리스너 함수를 추가합니다. 이는 사용자가 SVG 요소에 마우스를 올릴 때마다 이벤트 리스너 함수가 호출되는 것을 의미합니다.

애니메이션 SVG 형태

SVG 형태에 애니메이션 효과를 주기 위해 JavaScript 함수를 반복 호출해야 합니다. 이 함수는 형태의 위치나 크기를 변경하는 데 사용됩니다. 함수가 반복 호출되고 간격이 매우 짧을 때, 형태의 위치나 크기도 매우 짧은 간격으로 업데이트되어 형태가 애니메이션처럼 보입니다.

이 SVG 스크립트 애니메이션 예제입니다. 예제 아래에 이를 생성하기 위한 코드가 보입니다. SVG 이미지 아래의 두 가지 버튼을 클릭하여 애니메이션을 시작하고 정지할 수 있습니다.

이 애니메이션을 생성하기 위해 필요한 코드는 다음과 같습니다：

<svg　width="500"　height="100">
　　　　<circle　id="circle1"　cx="20"　cy="20"　r="10"
　　　　　　　　　　　　style="stroke:　none;　fill:　#ff0000;"/>
</svg>
<script>
　　　　var　timerFunction　=　null;
　　　　function　startAnimation()　{
　　　　　　　　if(timerFunction　==　null)　{
　　　　　　　　　　　　timerFunction　=　setInterval(animate,　20);
　　　　　　　　}
　　　　}
　　　　function　stopAnimation()　{
　　　　　　　　if(timerFunction　!=　null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction　=　null;
　　　　　　　　}
　　　　}
　　　　function　animate()　{
　　　　　　　　var　circle　=　document.getElementById("circle1");
　　　　　　　　var　x　=　circle.getAttribute("cx");
　　　　　　　　var　newX　=　2　+　parseInt(x);
　　　　　　　　if(newX　>　500)　{
　　　　　　　　　　　　newX　=　20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx",　newX);
　　　　}
</script>
<br/>
<input type="button" value="애니메이션 시작" onclick="startAnimation();">
<input type="button" value="애니메이션 정지" onclick="stopAnimation();">

이 두 HTML 버튼은 onclick 리스너를 추가했습니다. 이 리스너는 startAnimation()과 stopAnimation() 함수를 호출하여 애니메이션을 시작하고 중지합니다. 애니메이션은 매20 밀리초 후에 Animate() 함수를 호출합니다. 이 타이머 기능을 다시 지우면 애니메이션을 중지할 수 있습니다.

애니메이션은 animate() 함수 내에서 실행됩니다. 이 함수는 document.getElementById() 함수를 통해 SVG 이미지 내 <circle> 요소에 대한 참조를 얻습니다. 그런 다음, 원의 cx 속성을 읽고 숫자로 변환합니다. 그런 다음,2cx 값에 추가합니다. 새로운 x 값이500이면, 그것을 다시 설정합니다.20. 마지막으로, 새로운 x 값을 <circle> 요소의 cx 속성에 다시 설정합니다. 원이 새로운 x 위치로 이동합니다.