【发布时间】：2021-05-10 12:59:45
【问题描述】：
我有一个 svg，我试图在其中添加带有渐变的 <text> 元素。相同的LinearGradient 适用于一个 svg，但不会出现在其他 svg 上。仅当我在 svg 中有一个嵌套元素时，是否可以将渐变应用于 <text>？
我正在努力实现的目标
body {
background: #000;
}<svg width="100%" height="55" viewBox="0 0 258 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<text font-size="30" x="0" y="30" fill="url(#paint5_linear_t)"> Text should be gradient like this</text>
<defs>
<linearGradient id="paint5_linear_t" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>这里的方法相同，但不起作用
body {
background: #000;
}
.card-banner-title {
font-size: 40px;
}<svg class="card" width="450" height="616" viewBox="0 0 450 616" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<rect x="61.7617" y="22.4829" width="380" height="548" rx="61" transform="rotate(5 61.7617 22.4829)" fill="url(#paint0_linear)"></rect>
</g>
<g filter="url(#filter1_b)">
<rect x="63.3525" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.3525 24.3788)" stroke="url(#paint1_radial)" stroke-width="3.5"></rect>
<rect x="63.3525" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.3525 24.3788)" stroke="url(#paint2_radial)" stroke-width="3.5"></rect>
<rect x="63.3525" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.3525 24.3788)" stroke="url(#paint3_radial)" stroke-width="3.5"></rect>
</g>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="14" y="22" width="427" height="580">
<rect x="61.7617" y="22.4829" width="380" height="548" rx="61" transform="rotate(5 61.7617 22.4829)" fill="url(#paint4_linear)"></rect>
</mask>
<text class="card-banner-title" fill="url(#paint5_linear_tc)"
data-svg-origin="0 -43" transform="matrix(0.9962,0.08716,-0.08716,0.9962,66.25212,409.8366)"
style="transform-origin: 0px 0px; transform: matrix(0.9962, 0.08716, -0.08716, 0.9962, 66.2521, 409.837);">Here is no gradient</text>
<path d="M110.603 106.747L100.985 110.776L103.638 100.691L96.8337 92.7899L107.243 92.1965L112.656 83.2834L116.438 93.0009L126.587 95.3929L118.514 101.993L119.375 112.385L110.603 106.747Z" stroke="url(#paint7_radial)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<defs>
<filter id="filter0_b" x="-28" y="-19.5171" width="510.315" height="663.034" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feGaussianBlur in="BackgroundImage" stdDeviation="21"></feGaussianBlur>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"></feComposite>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"></feBlend>
</filter>
<filter id="filter1_b" x="-28" y="-19.5171" width="510.315" height="663.034" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feGaussianBlur in="BackgroundImage" stdDeviation="21"></feGaussianBlur>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"></feComposite>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"></feBlend>
</filter>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1.31579" height="1.31387">
<use xlink:href="#image0" transform="scale(0.00263158 0.00182482)"></use>
</pattern>
<linearGradient id="paint0_linear" x1="73.1617" y1="38.0857" x2="463.817" y2="606.864" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.4"></stop>
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(114.681 86.3485) rotate(55.7067) scale(886.206 408.172)">
<stop stop-color="white"></stop>
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
</radialGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(251.762 296.483) rotate(58.5326) scale(410.938 284.945)">
<stop stop-color="#48E6D8"></stop>
<stop offset="1" stop-color="#48E6D8" stop-opacity="0"></stop>
</radialGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(414.27 42.5193) rotate(124.907) scale(676.798 469.762)">
<stop stop-color="#002421"></stop>
<stop offset="0.635417" stop-color="#002421" stop-opacity="0.364583"></stop>
<stop offset="1" stop-color="#002421" stop-opacity="0"></stop>
</radialGradient>
<linearGradient id="paint4_linear" x1="73.1617" y1="38.0857" x2="463.817" y2="606.864" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.4"></stop>
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
</linearGradient>
<linearGradient id="paint5_linear_tc" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>【问题讨论】：
标签： html css svg gradient linear-gradients