<svg viewBox="0 0 500 200" currentScale="1">         

         <path id="curve" d="M30 90 Q265 200 500 90" fill="none" />         

         <defs>            

                    <linearGradient id="g3" x1="100%" y1="100%" x2="0%" y2="0%">               

                                 <stop offset="0%" stop-color="#00A4FF"></stop>                

                                <stop offset="100%" stop-color="#FFFFFF"></stop>            

                    </linearGradient>        

            </defs>         

             <text width="500" fill="url(#g3)" >            

                            <textPath xlink:href="#curve">              北京短时强天气决策服务平台            </textPath>         

             </text>        

</svg>

以上是完整代码，效果如下：

svg实现字体弯曲排列，样式渐变

svg详解：

viewBox中的两个参数（0 0 500 200）前者是制图开始坐标，后者是svg这个盒子宽，高。

path：path选择器来定义路径。d属性用来定义路径数据。fill：填充颜色。 

 d="M30 90 Q265 200 500 90"。这行代码我自己的理解是：M30 90 弧线的起点，Q265 200 弧线的最低点,[265=(500+30)/2]点的X标，200点的Y坐标，500  90 弧线的终点。

defs:样式写在这个里面。比如：linearGradient渐变（渐变对象属于一种特效对象） radialGradient为放射性渐变

text：插入文本的地方  

textPath： 文本的路径 xlink:href="#curve"