1

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">
    <g>
        <defs>
            <rect id="SVGID_1_" x="7.481" y="25.028" width="140.996" height="102.267"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="visible"/>
        </clipPath>
        <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  "/>
    </g>
</svg>
  • looks like you're making the clipping mask the wrong way around. The shape needs to be on top of the gradient when making the clipping mask (like this: i.stack.imgur.com/euIYY.png). Vinny's answer is correct though if you simply want to fill a shape with a gradient – Cai Sep 21 '17 at 12:20
3

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

  • because if I'm connecting more shapes it will look weird. I'll show you an example of what I mean – user81523 Sep 21 '17 at 12:20
  • 1
    Example of what I meant: i.imgur.com/XDzkdL2.png (why i'm not using this way) – user81523 Sep 21 '17 at 12:22
  • 2
    @natanelg97 in that case you just need to make a compound path of all the shapes – Cai Sep 21 '17 at 12:22
  • 2
    Yes, a compound path will be treated as a single path so the gradient will be continuous – Cai Sep 21 '17 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy