Unanswered

Adding a svg object

(0) Share

Report

Posted on by Community Power Pla...

Hi everyone,

I want to add a SVG status/progress bar. However when I inser the code, I dont see anything. Any suggestions why? I am working on a german environment. Maybe some syntax issue?

"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%3E"

&
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
"%20A%20" &
"40%2040%200%201%201%20" & Text(50-40*Sin(2*Pi()-Pi()/4)) & "%20" & Text(50+40*Cos(2*Pi()-Pi()/4)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
"%20A%20" &
"40%2040%200%20" & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0") & "%201%20" & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & "%20" & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3C%2Fsvg%3E"

Categories:

Building Power Apps

I have the same question (0)

All responses (18)

Answers (2)

Pstork1 68,697 Most Valuable Professional on at

Like (0)

Report
Are you inserting this into an Image Control? If so there are a number of issues with the code. A number of quote marks etc were off and also some issues with single vs double quotes. Try this code instead.

"data&colon;image/svg+xml,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'>" & "<path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='" & "M " & Text(50-40*Sin(Pi()/4)) & " " & Text(50+40*Cos(Pi()/4)) & " A " & "40 40 0 1 1 " & Text(50-40*Sin(2*Pi()-Pi()/4)) & " " & Text(50+40*Cos(2*Pi()-Pi()/4)) & "'>" & "</path>" & "<path fill='none' style='stroke-width:18;stroke:rgb(69,204,206);stroke-linecap:round;' d='" & "M " & Text(50-40*Sin(Pi()/4)) & " " & Text(50+40*Cos(Pi()/4)) & " A " & "40 40 0 " & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0") & " 1 " & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & " " & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & "'>" & "</path>" & "</svg>")

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Thanks for the answer. I actually got the code from here:

https://docs.microsoft.com/de-de/archive/blogs/davidni/advanced-powerapps-visualizations-with-dynamic-svgs

I copied your code. However I still only see a blank image.

Was this reply helpful? Yes No
CarlosFigueira on at

Like (0)

Report

Do you see any errors if you click on the formula bar for the expression? Also, do you have a slider control (called Slider1) in your app?

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

No there are no errors, and yes I have a slider called Slider1 in the app

Was this reply helpful? Yes No
Pstork1 68,697 Most Valuable Professional on at

Like (0)

Report

I tried it in an image control on a power app here in the US and it worked fine as long as I changed the appropriate ';' seperators to ','. So it should work for you. If the image is blank it might be due to some incorrect calculation. Try replacing the IF() with a simple "1" and see if it shows up.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Thanks for helping. Tried it by replacing the IF() with 1. Still does not work.

Was this reply helpful? Yes No
Pstork1 68,697 Most Valuable Professional on at

Like (0)

Report

Then there is some other syntax error. As I said, it works for me here in the US. The only thing that should be different is seperators. I tried to replace the ones I spotted, but there may be more.

Was this reply helpful? Yes No
RandyHayes 76,297 Super User 2024 Season 1 on at

Like (0)

Report
@Anonymous

I also took a look and it seemed fine - here is the formula I used from yours (I adjusted back to the semicolons in this formula):

"data&colon;image/svg+xml," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'> <path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='M " & Text(50-40*Sin(Pi()/4)) & " " & Text(50+40*Cos(Pi()/4)) & " A 40 40 0 1 1 " & Text(50-40*Sin(2*Pi()-Pi()/4)) & " " & Text(50+40*Cos(2*Pi()-Pi()/4)) & "'> </path> <path fill='none' style='stroke-width:18;stroke:rgb(69,204,206);stroke-linecap:round;' d='M " & Text(50-40*Sin(Pi()/4)) & " " & Text(50+40*Cos(Pi()/4)) & " A 40 40 0 " & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0") & " 1 " & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & " " & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & "'> </path> </svg>")

By the way, here's a circular one as well if you like:

"data&colon;image/svg+xml," & EncodeUrl( "<svg width='100%' height='100%' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'> <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle> <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#32CD32' stroke-width='3'></circle> <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#E60000' stroke-width='3' stroke-dasharray='" & Slider1.Value & " " & 100-Slider1.Value & "' stroke-dashoffset='25'></circle> </svg>")

I only saw two places in your formula that needed the ";" adjusted, bit otherwise fine.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

I also tried that circle one. Sadly it does not work.

Was this reply helpful? Yes No
RandyHayes 76,297 Super User 2024 Season 1 on at

Like (0)

Report

@Anonymous

Change the &colon; in the first line to ":"

Should be "data&colon;image"

Was this reply helpful? Yes No