: 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: I have tried creating a clipping mask

@Shelley591

Posted in: #AdobeIllustrator #ClippingMask #Gradient #Svg

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

This is the 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):



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>

Vote Up Vote Down

Login to post a comment!