[SVG] SVG element의 class 값을 jquery 이용해서 변경하기

SVG 의 element 의 class 변경 하기

이러한 경우  jQuery 에서 제공하는 removeClass/addClass  메소드가 동작하지 않는다.

변경하는 방법은 다음과 같다.

$('#elementId').attr('class', 'changeClass');

여러개를 적용 하려면 다음과 같이 여러개의 클래스명을 사용하면 된다.

$('#elementId').attr('class', 'changeClass1 changeClass2');


** 기존의 class 를 통째로 교체 하기 때문에 필요한 클래스를 모두 써줘야 한다.

[JavaScript] this 의 용법

this 키워드는 JavaScript 코드를 가지고 있는 객체를 지칭한다. 

function에서 사용 되는 경우 그 function 을 가지고 있는 객체를 지칭하고 객체에서 사용하면 객체 자체를 가르킨다. 

<script>

function Person (name, age) {
    this.name = name;
    this.age = age;

    this.sayHello = function () {
          var name = "Person";
          return this.name +  " : Hello " + name + ".";
    }
}

var smith = new Person("smith", 37);console.log (smith.sayHello ()); // smith : Hello Person.

</script>

위의 예제에서 출력 결과는 "smith : Hello Person.”이다.

Person 바로 아래에 있는 this 는 현재 코드를 소유한 객체(smith)를 지칭하게 되고 sayHello 아래에서 this 는 function 소유한 객체를 가키게 된다. 즉, smith 이다.

따라서 sayHello 함수에서의 this는 함수 자신이 아닌 smith이다. 그래서 this.name은 “smith” 가 되고 name은 함수 내부의 변수 “Person”을 가르키게 된다. 

이와 비슷한 형태로 혼동하기 쉬운 상황이 있다. 

<script>

function civil() {

    var name = "Neo";

    function sayMyName() {

         console.log ("name : " + name); // name : Neo

         console.log ("this.name : " +  this.name); // this.name : 

    }

    sayMyName();

}

    

civil();

</script>

이와 같은 경우는 function 에서 사용되는 경우이다. 

현재 civil() 을 실행 시키는 주체 window 이므로 코드를 소유한 객체는 window 가 된다 따라서 this 키워드는 window 객체를 가르 키게 된다. 

따라서 이 경우 this.name 은 내용이 없어서 안찍게 된다. 

실제로  civil(); 을 window.civil(); 로 해도 동일하게 동작하게 된다.  

참조 : http://www.w3schools.com/js/js_object_definition.asp

[SVG] Raphaeljs 사용 팁 - ID 와 Class 설정

1. element에 아이디 설정하기
svg  요소를 조작하기위해서 아이디를 설정해야 하는 경우가 있다. 이때 다음과 같이 설정하면 된다. 

element.node.id = myid;

*notice : set 인경우에 id 항목이 없다. 따라서 해당 element 까지 내려가서 설정해야 한다. 
 ex) set1[0][0].node.id = myid;


2. element 에 css용 클래스 설정하기 

 element.node.setAttribute("class","myclass");

*notice : 위와 동일