2012-08-27 2 views
5

가능한 중복은 :
Changing SVG image color with javascript호버에서 SVG 이미지의 색상을 변경하려면 어떻게해야합니까?

나는 그것을 위에 마우스를 올려 때 SVG 이미지의 채우기를 변경하고 싶습니다.

지금 나는 Illustrator에서 SVG로 검은 색 물음표를 내보냈습니다. img 태그를 사용하여 내 페이지를 넣을 수 있지만 잘 표시되지만 코드에서 색상을 변경하는 방법을 알지 못합니다.

+0

나는 SVG에 너무 익숙하지 않다. 마우스를 올리면 배경색을 바꿀 수 있을까? 얼마 전에 과제에 대해 다음과 같이했습니다. http://bit.ly/Q1Irwv – BillyNair

답변

1

SVG 파일이 변경 될 수 있습니다 javascript에서 직접 가져올 수 있습니다. 즉, "이미지"의 속성은 DOM 내에서 액세스 할 수 있습니다. 스택 오버 플로우에서이 게시물

봐이 : modify stroke and fill of svg image with javascript

그것은 * 대신를 사용하여 일반적인 HTML * < IMG/> * 태그에 SVG 파일을 묶으 수없는, 즉 그렇게 기억하는 것이 중요 < svg> * ... ** < /svg>으로 표시됩니다.

편집 : 당신은 SVG 개체의 많은 속성을 볼 수 있도록 내가 W3 스쿨에 대한 링크를 추가

svg on w3schools

되세요 재미

+0

w3schools의 svg는 404 (페이지를 찾을 수 없음)를 제공합니다. – Kaleab

-3

코드를 게시 할 수 있다면 문제를 해결할 수 있습니다. 이 다음

시도 : 또는 http://tutorials.jenkov.com/svg/svg-and-css.html

(SVG에 배타적이지), 서로 다른 이미지의 코드의 이러한 유형의 사용

<img src="image1.svg" 
onmouseover="this.src='image2.svg'" 
onmouseout="this.src='image1.svg'"> 

라이브 데모가 : http://jsfiddle.net/JNChw/

+5

이미지 대체는 svg 경우의 호버 채우기 색상을 변경하는 것은 매우 비효율적 인 방법입니다. –

6

당신이 안 SVG에서 호버 효과를 수행해야하는 경우 < img> 태그를 사용하십시오. 대신 < iframe>, < 개체> 또는 < embed> 태그로 svg를 참조하십시오. http GET 요청을 저장하려면 html 문서에 svg 마크 업을 삽입 할 수 있습니다.

간단한 채움 호버 효과 inside an svganother one (필터를 사용하여 마우스를 올리면 윤곽선을 만드는 데 약간 더 복잡함)을 보여주는 예입니다. 어쨌든, 기본적으로 : hover CSS 규칙을 적용하여 채우기 색상을 설정하는 것입니다.

위의 모든 방법으로 svg를 사용하는 예는 here입니다.

관련 문제