Illustrator SVG change fill opacity using gsap

[Sam Smith]

I have .svg that was generated by Illustrator that is being pulled in by css.

star.svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
	.star_fill{opacity:0.3;fill:#ED1C24;}
	.star_outline{fill:#231F20;}
</style>
<polygon id="star_x5F_fill" class="star_fill" points="50,11.958 62.361,37.003 90,41.019 70,60.515 74.721,88.042 50,75.045 
	25.279,88.042 30,60.515 10,41.019 37.639,37.003 "/>
<path id="star_x5F_outline" class="star_outline" d="M76.714,90.784L50,76.74L23.287,90.784l5.102-29.746L6.776,39.972l29.867-4.34L50,8.568
	l13.356,27.064l29.867,4.34L71.611,61.038L76.714,90.784z M50,73.352L72.729,85.3l-4.341-25.309l18.388-17.924l-25.412-3.692
	L50,15.347L38.635,38.375l-25.412,3.692l18.388,17.924L27.271,85.3L50,73.352z"/>
</svg>

css & html:

.star {
    background: url(star.svg) no-repeat top center;
    background-size: 100% 100%;
}

<div id="star" class="star"></div>

How do you change the opacity value inside the ".star_fill" class inside the svg using gsap?
 

[Shaun Gorneau]

Hi @Sam Smith,

 

There are two was you can tackle this ... each affect it differently. If you want to change the opacity of the star, you could tween the opacity of the element that has the star.svg assigned as a background (just as you would for any element with an image as a background).

 

But, I think you want to affect a specific attribute of the SVG, not the element presenting the SVG itself. For that, the SVG needs to be in the markup to be accessed like any other DOM element.

 

See the Pen rNjoWKj by sgorneau (@sgorneau) on CodePen

 

Shaun

 

[Sam Smith]

@Shaun Gorneau Thanks for the quick reply! I was afraid that was the case. Your solution will work! I really appreciate it.

[PointC]

I know this is solved and I'm late to the party, but since fill opacity is referenced in the thread title, I thought I'd add two cents. fill-opacity is a SVG presentation attribute which can be used as a CSS property. That allows you to use a stroke on the target element without having a separate path like the original demo above. Not that there is anything wrong with that, this is just another way to go. 

 

See the Pen jOydVLo by PointC (@PointC) on CodePen

 

This works not only on solid fills, but patterns and gradients too. stroke-opacity is also a presentation attribute which can be used as a CSS property so this can also be used the other way around.

 

Happy tweening.