使用SVG标签完成文字水平居中，颜色渐变

• 官方简介

developer.mozilla.org/zh-CN/docs/…

• 常用功能

developer.mozilla.org/zh-CN/docs/…

  想要实现文字渐变，兼容ie，以下方法不可行

.text {
   color: transparent;
   background-image: linear-gradient(to top, #83fbfe 0%, #fff 100%);
   -webkit-background-clip: text;
}

使用ie可兼容的svg标签，实现文字水平垂直居中渐变

<svg>
    <defs>
        <linearGradient id="headerLinearGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"  stop-color="#83fbfe"/>
            <stop offset="100%"  stop-color="#fff"/>
        </linearGradient>
    </defs>
    <text x="0" y="60%" class="fd-svg-text">立案统计</text>
</svg>

.fd-title01 {
    position: relative;
    padding-top: 10px;
    width: 390px;
    height: 48px;
    text-align: center;
    background: url("../../images/common/bg/bg-title01.png") 0 no-repeat;
    background-size: 100% 100%;


    svg {
        width: auto;
        height: 38px;
    }


    .fd-svg-text {
        font-size: 24px;
        font-weight: bold;
        text-anchor: middle;
        //dominant-baseline: middle;
        fill: url(#headerLinearGradient);
        //transform: translateX(50%);
    }
}
注意：dominant-baseline：middle（垂直居中）在ie下没效果，只能用高度或者y调整

效果：忽略icon图标与背景