2009-09-22 4 views
2

이미지 스프라이트에 SVG를 사용한 적이 있습니까? 매우 비슷한 GIF와 JPG를 확장 가능한 SVG 이미지로 대체하고 싶지만 이미지 그라데이션과 버튼 모양 사양이 SVG에서 부풀려 있습니다.SVG 이미지 스프라이트? 가능하거나 없습니까?

그래도 합성 다이어그램을 만들 수 있다면 그래디언트와 기본 버튼 모양 등을 재사용 할 수 있습니다. CSS 문서 내부에서 SVG 이미지를 참조 할 수 있는지 여부는 확실하지 않습니다. img 태그보다는 embed 나 object 태그를 통해 SVG를 사용해야하기 때문에 그렇지 않다고 가정합니다.

아마도 프로그래밍 방식으로 jquery를 사용하여 마스터 SVG 문서의 조각을 가져 와서 필요에 따라 SVG 이미지를 작성하는 데 사용할 수 있습니다. 그러나 나는 그것이 꽤 느릴 것이라고 생각한다?

감사합니다,

앤드류 매튜스

+0

svg는 기본적으로 IE에서 지원되지 않습니다. 타겟 고객이 IE를 사용한다면 다른 경로를 찾는 것이 더 나을 것입니다. –

+0

안녕하세요 Matthew, IE의 경우 GIF로 돌아가고 싶지만 Chrome을 내 쇼케이스 데모 플랫폼으로 사용하고 싶습니다. 앱은 매우 집중적 인 JS입니다. –

+0

나는 이것을하기위한 가벼운 방법을 생각해 냈다. 이 Q & A를 참조하십시오. http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/ –

답변

1

여기 <img><canvas> 드로잉에 대한 순수한 요소 형태로 SVG를 사용하여 내 예,의 IIRC 오페라 9.5에서까지 작동합니다

http://dahlström.net/svg/presentations/svgdemos/canvas2d.html

Webkit 또한 <img> 요소의 svg를 수행하며 위의 예제는 지금 막 테스트 한 Epiphany 웹킷 버전에서 작동합니다 (새로 고침해야 볼 수 있음). 호랑이,하지만 그것은 예상대로 캔버스에 끌렸다).

+0

감사합니다. Eric. Opera를 사용할 때 CSS 스타일 시트에서 SVG 파일을 참조 할 수 있습니까? 아마 버튼 배경에 url (...) 요소를 사용하고 있을까요? –

+0

예, 지원됩니다. 몇 가지 예 : http://a.deveria.com/?p=76 –