我可以在文本上使用CSS3 / HTML 5水平多颜色渐变吗？ [英] Can I have a horizontal multiple colour gradient on text using CSS3 / HTML 5?

问题描述

我想用CSS 3样式替换目前在网站上使用的基于sIFR的Flash效果。我有文本渐变效果很好使用CSS 3，但原来的sIFR实现有多种颜色，而不只是一种颜色到下一个简单的渐变。

我是一个样式的文本元素，如使用水平轴上多种颜色的样式的例子？

谢谢，
布莱恩。

解决方案

p>

以下是使用FF4，Safari 5和Chrome测试的SVG代码示例。请注意，您必须将其作为XHTML页面提供给Safari才能呈现。这也应该与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; MyFirstGradient）;> 
 BIG TEXT TEST 
< / text> 
< / svg> 
  

I'm trying to replace a sIFR based flash effect currently used on a website with CSS 3 styling. I have the text gradient effect working well using CSS 3 but the original sIFR implementation had multiple colours rather than just a simple gradient of one colour to the next.

Can someone provide me an example of styling a text element such as an H2 using multiple colours along the horizontal axis?

Thanks, Brian.

解决方案

Here is sample SVG code - tested with FF4, Safari 5, and Chrome. Note that you have to serve this as an XHTML page for Safari to render it. This should also work with IE9 but I haven't tested it.

<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>

这篇关于我可以在文本上使用CSS3 / HTML 5水平多颜色渐变吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！