There's no way to get Illustrator to export an SVG with a "live" blend mode so any solution with blend modes will need to be done manually after you have exported your SVG.
Depending on the level of browser support you need, you can use CSS blend modes. There is a great article on using CSS blend modes on CSS-Tricks:
mix-blend-mode: multiply; to the style of your star.
It's a little more complicated than using CSS blend modes but SVG does have its own method for applying blend modes. SVG filters are more complicated but do have better browser support. The
<feBlend> filter is used to composite two objects (specified with the
in2 attributes) using a specific blend mode (specified with the
An example of an SVG
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#circle" result="circle"/>
<feImage xlink:href="#star" result="star"/>
<feBlend mode="multiply" in="circle" in2="star" />
<path id="circle" d='M100....Z' fill='#00FFFF'/>
<path id="star" d='M150....Z' fill='#0033FF'/>
<rect width="100%" height="100%" filter="url(#f1)"/>
Or use another gradient...
Another option is to just use another solid gradient. Set a multiply layer over the whole of your circle and rasterize it so that you can use the eyedropper to recreate the gradient (or use Photoshop's eyedropper, or just match it by-eye). Then mask you new gradient circle with the star path.
Or the easiest way (as you suggested yourself) is to use Object → Flatten Transparency. Just duplicate the bottom object beforehand if you want to keep it unaffected.