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?
