Change a SVG with href code

[Anonymous]

Hello everyone,

I really like to work with SVG's in Power BI. Especially because you can visual a percentage in an image. When I convert a png to a svg, I get the code 'href=', followed by the code of the image itself. A href code allows for the preservation of the originial colors of the png (in comparison with 'path='). However, I don't know if it's possible to add the following code to the SVG:

<defs>

               <clipPath id='maskClip'>

               <rect x='0' y='0' width='374' height='100'/>

               </clipPath>

</defs>

style= 'fill: grey; clip-path:url(#maskClip)' >

This code should be added in the SVG Skyline New York. Since that code is long, I have pasted that in a Drive. You can click on the link down below. 

To give an example I am looking for: 

For example, when the result for something is 70%, I want 70% of the image should be visible, the remaining should be covered with the color grey. (The percentage is dynamic and I already have a measure for that). The point is, I want to adjust the SVG so that it can be covered with the color grey (or any color for that matter). 

I hope I explained it thoroughly enough.. If not, please let me know!

SVG Skyline New York 

[KerKol · Accepted solution]

Hi,

You can do this with HTML but it becomes tricky when trying to get viewbox and image size the same.

You may find it easier with PureViz.

In PowerPoint, you can lay your image down and add a shape over the top exactly the same size.

Then you can select both the image and the shape and save as svg.

Import this svg into the PureViz Custom visual.

Select the shape, add a dynamic formula to change the size according to your data...

[Anonymous]

@KerKol This is great!!! Thanks you so much. I didn't know this visual. It works so convenient and offers so many new options! 

[KerKol]

You're very welcome 🙂

[lbendlin]

should be possible. However your link is requiring access.

[Anonymous]

Oh my apologies! 

I changed it, so the link is not available for everyone:

Skyline New York