1

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>

1 Answer 1

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>

1
  • 1
    Perfect! Thank you
    – rokky
    Feb 6, 2021 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.