Trouble filling SVG icon with color

[kbraga]

I'm trying to fill an SVG icon with a color to show the percentage complete towards a specific goal. The goal is 100 hours volunteered and my data lists the number of hours volunteered per person (column name: [Hours volunteered]. I have two questions: (1) what should my measure to show the percentage of hours volunteered compared to the goal of 100? and (2) how should it be incorprated into my SVG KPI measure? For the latter, I currently have the following but it is not working correctly:  

----

Icon KPI =

// svg essentials

var svg_start = "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>"

var svg_end = "</svg>"

//def clip path

var clip_height = (DIVIDE([Hours Volunteered],300,000)) * 100

var clip_y = 100 - clip_height

var defs = "<defs><clipPath id='iconClip'>

<rect x='0' y='" & clip_y & "' width='96' height='" & clip_height & "' />

</clipPath></defs>"

// Color

var grey_icon = "<g style='fill:grey;'>" & [Celebration Icon SVG] & "</g>"

var red_icon = "<g style='fill:red; clip-path:url(#iconClip)'>" & [Celebration Icon SVG] & "</g>"

//combine SVG Parts

return

svg_start & defs & grey_icon & red_icon & svg_end

[v-xicai]

Hi  @kbraga  ,

Do the suggestions from engineers make sense? If so, kindly mark the proper reply as a solution to help others having the similar issue and close the case. If not, let me know and I'll try to help you further.

Best regards

Amy

[amitchandak]

@kbraga , refer if this can help

https://community.powerbi.com/t5/Desktop/SVG-Image-Sparklines-on-rows-in-Power-BI-table/m-p/1169515#...

https://www.youtube.com/watch?v=xLD8HKwPWHE

[Greg_Deckler]

@kbraga - See if these SVG examples help:

https://community.powerbi.com/t5/forums/searchpage/tab/message?advanced=false&allow_punctuation=fals...

[kbraga]

To get the above, I tried to follow this tutorial: https://hatfullofdata.blog/svg-in-power-bi-part-3/