CSS3/HTML 5를 사용하여 텍스트에 수평 다중 색상 그라디언트를 사용할 수 있습니까?

Question

CSS 스타일 3로 웹 사이트에서 현재 사용되는 sIFR 기반 플래시 효과를 대체하려고합니다. 텍스트 그라데이션 효과는 CSS 3을 사용하여 잘 작동하지만 원본 sIFR 구현은 다음 색상까지 단순한 그라디언트가 아닌 여러 색상을 사용합니다.

누군가 가로 축을 따라 여러 색상을 사용하여 H2와 같은 텍스트 요소의 스타일을 지정하는 예를 제공 할 수 있습니까?

감사합니다. 브라이언.

Answer 1

샘플 SVG 코드에서만 가능합니다 - FF4, 사파리 5, 및 크롬 테스트. Safari에서 렌더링 할 XHTML 페이지로 제공해야합니다. IE9에서도 작동하지만 테스트하지는 않았습니다.

<svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1"> 

    <defs 
    id="FooDefs"> 
    <linearGradient 
     id="MyFirstGradient" 
     x1="400" 
     y1="350" 
     x2="400" 
     y2="420" 
     gradientUnits="userSpaceOnUse"> 
     <stop 
     id="stop1" 
     style="stop-color:#1acf86;" 
     offset="0" /> 
     <stop 
     id="stop2" 
     style="stop-color:#ff0051;" 
     offset="0.25" /> 
     <stop 
     id="stop3" 
     style="stop-color:#1da1c9;" 
     offset="0.625" /> 
     <stop 
     id="stop4" 
     style="stop-color:#e45f25;" 
     offset="1" /> 
    </linearGradient> 
    </defs> 
    <text 
     x="150" 
     y="420" 
     id="textBAR" 
     style="font-size:72px;fill:url(#MyFirstGradient);"> 
BIG TEXT TEST 
</text> 
</svg> 

Answer 2

은 내가 아는 한이 웹킷 여기

h1 { 
    font-size: 72px; 
    background-image: -webkit-gradient(
    linear, 
    left top, 
    right top, 
    color-stop(0.03, rgb(250,3,3)), 
    color-stop(0.52, rgb(240,255,127)), 
    color-stop(0.76, rgb(42,24,173))); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

http://jsfiddle.net/gEGHq/1