title: Make a portion of a transparent svg opaque
body: <p>I have an eps file that I converted into an SVG. It's a free-form object with many lines/fills/strokes/etc with a transparent background.</p>
  
  <p>I'm overlaying an additional div over this SVG that has a color hue with transparency so this hue changes the look of the SVG beneath. This works well, however I'd only like to have this div to lay over just the SVG (not a big rectangle box like it does now). Note also that I don't want to change the hue over the entire SVG object, just a portion of it (say 40%).</p>
  
  <p>Any idea how I can accomplish this? I would think some sort of SVG clipping mask but I haven't found a way to do this yet.</p>
  
  <p>Thanks,
  Mark</p>
  
  <p><strong>UPDATE:</strong> Here is an example image of what I'm trying to do. The person on the left is before highlighting, and the person on the right is after highlighting. I'd like the highlight to only affect the person (just the SVG, no background), and need it to be adjustable (up and down to adjust fill amount) depending on the svg used. I'd also like the fill color to be transparent (say 70%) so that the SVG image will appear through it.</p>
  
  <p>Here's also a JSFiddle with this exact SVG <a href="http://bit.ly/1GFkjHI" rel="nofollow noreferrer">http://bit.ly/1GFkjHI</a>
  <a href="http://markshust.com/highlight.png" rel="nofollow noreferrer">http://markshust.com/highlight.png</a></p>