아마 한번쯤은 생각해보셨을지도 모르겠습니다. Mozilla의 Rob O'callahan 씨가 자신의 블로그에 SVG효과를 HTML에 적용하는 실험적인 Gecko 브랜치 시연에 대한 글을 작성해 우리를 놀라게 만들었습니다.
사용자 삽입 이미지
위와 같은 효과는 아래 코드를 적용함으로써 가능합니다:
[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씨는 다음과 같은 몇가지 좋은 지적을 해주셨습니다:
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
Posted by 행복한고니 트랙백 0 : 댓글 0