svg 上的渐变<text>元素不工作</text>

Question

I have an svg, inside of which I'm trying to add <text> element with gradient. The same LinearGradient works for one svg, but doesn't showing up for other svg. Does gradient can be applied to the <text> only if I have one nested element inside svg?

What I'm trying to achieve

 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>

The same approach here, but it doesn't work

 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>

Answer 1

Try removing gradientUnits="userSpaceOnUse" from the gradient definition, as this tells it to use absolute units ( the default is objectBoundingBox , which scales the gradient to fit the object):

 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 the 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%"> <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>