Exporting an SVG with a gradient clipping mask from Illustrator

I have a group, and I want to fill it with a gradient.

This is the desired outcome:

Desired outcome

I have tried creating a clipping mask in Illustrator and exporting to an SVG but the shape remains black in the SVG.

Here is my layers tab (with clipping mask):

Layers tab

Here is the SVG Code that exports:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="150px" height="150px" viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve">
            <rect id="SVGID_1_" x="7.481" y="25.028" width="140.996" height="102.267"/>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="visible"/>
        <polygon clip-path="url(#SVGID_2_)" points="72.788,98.062 72.788,83.254 78.849,83.254 78.849,35 59.938,35 59.938,54.486 
    34.24,54.486 34.24,61.749 59.938,61.749 59.938,83.254 67.201,83.254 67.201,98.062 36.475,98.062 36.475,116.497 
    115.246,116.497 115.246,98.062  "/>


Is there any reason for using a clipping mask?
Why do you not simply apply a gradient to the form… Nothing tricky really!

enter image description here

Source : Link , Question Author : Community , Answer Author : Vinny

Leave a Comment