아마 한번쯤은 생각해보셨을지도 모르겠습니다. Mozilla의 Rob O'callahan 씨가 자신의 블로그에 SVG효과를 HTML에 적용하는 실험적인 Gecko 브랜치 시연에 대한 글을 작성해 우리를 놀라게 만들었습니다.
위와 같은 효과는 아래 코드를 적용함으로써 가능합니다:
from Mozilla Experiments with Applying SVG Effects to HTML on Ajaxian
[code:js]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body style="background:#ccc; font-size:30px;">
<style>
p { width:300px; border:1px solid black; display:inline-block; margin:1em; }
iframe { width:300px; height:300px; border:none; }
b { outline:1px dotted blue; }
</style>
<p class="target" style="background:lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<iframe class="target" src="http://mozilla.org"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam.</p>
<style>.target { clip-path: url(#c1); }</style>
<svg :svg height="0">
</svg><svg :mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
</svg><svg :linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
<svg :stop stop-color="white" offset="0"/>
<svg :stop stop-color="white" stop-opacity="0" offset="1"/>
</svg>
<svg :circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
<svg :rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
</body>
</html>
Rob씨는 다음과 같은 몇가지 좋은 지적을 해주셨습니다:<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body style="background:#ccc; font-size:30px;">
<style>
p { width:300px; border:1px solid black; display:inline-block; margin:1em; }
iframe { width:300px; height:300px; border:none; }
b { outline:1px dotted blue; }
</style>
<p class="target" style="background:lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<iframe class="target" src="http://mozilla.org"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam.</p>
<style>.target { clip-path: url(#c1); }</style>
<svg :svg height="0">
</svg><svg :mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
</svg><svg :linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
<svg :stop stop-color="white" offset="0"/>
<svg :stop stop-color="white" stop-opacity="0" offset="1"/>
</svg>
<svg :circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
<svg :rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
</body>
</html>
CSS는 진보된 시각 효과를 HTML에 적용하는 작업에는 정말 안어울립니다. 한가지 문제는 CSS가 shape나 filter 처리 스택과 같은 구조적인 값을 관리하는데 좋지 못하다는 것입니다; CSS 문법으로 그들을 표현하려면 성가십니다. 아니면 새로운 사용자정의 CSS 문법이 필요해지죠(예. @-rules). 그리고 스크립트가 이러한 구조적인 값들을 다룰 수 있게하는 표준 DOM 이 없습니다. 또다른 문제는 우리가 명세의 중복과 복잡한 기능의 구현을 피해야 한다는 데에 있습니다.그리고는 다른 기술들과는 다른 SVG의 장점에 대해 말했습니다:
보다 나은 SVG-HTML 통합을 제공함으로써 얻어지는 좋은 덤은 SVG가 웹에 발을 들여놓을 수 있게 된다는 것입니다. Flash나 Silverlight를 사용해서는 이런 효과를 실행할 수 없습니다. 그들은 표준이 아니기 때문에 아마도 이대로 계속 이 파티에 초대받지는 못할 것입니다.WebKit의 눈부신 CSS와는 다르게, Gecko에서는 그러한 것들을 아직 사용할 수 없습니다:
저는시험서버를 만들고 있습니다. 그들이 준비가 되면 이 포스트를 업데이트하겠습니다. 제 Mercurial 저장소로 가능 링크는 이렇습니다.
from Mozilla Experiments with Applying SVG Effects to HTML on Ajaxian
'[IT] Web Tech' 카테고리의 다른 글
| WiiExtJS: Wii Opera 브라우저에서 구동되는 Ajax 프로그램 만들기 (0) | 2008.06.12 |
|---|---|
| Nexaweb, dojo.E 마크업과 런타임 발표 (0) | 2008.06.12 |
| SquirrelFish: 기술적인 흥미 (0) | 2008.06.12 |
| IE 8 beta 2, 8월 출시 예정 (0) | 2008.06.12 |
| Mozilla의 실험적인 SVG 효과 적용 (0) | 2008.06.12 |
| OpenAjax 연합의 Mobile Ajax와 최근 브라우저 진보에 관한 백서 (0) | 2008.06.12 |
| jQuery 1.2.6 릴리스 : 성능 개선, Core에 Dimension 플러그인 추가 (0) | 2008.06.11 |
| Ajaxian 자습서: Coda 슬라이더 효과 (0) | 2008.06.11 |
| SquirrelFish: 새로운 상세 사항 (0) | 2008.06.11 |