Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
4 years ago
Solved

SVG measure incorrect

Hello everyone,

 

I have an SVG of a battery. I want to show the percentage charged in a green color from the bottom, and the percentage remaining should have a white color. 

Unfortunately, I have three issues:

1. the background color is is black, eventhough I the color code is #ffffff, so white. 

2. the green color is filling up from the top instead from the bottom

3. the green color is not the percentage charged, but the remaining percentage. I already added (1-percentageArea) in the measure, but it doesn't make a difference

 

So, I don't understand what's going on. I can even delete the first SVG code with backgroundColor. It wouldn't make a difference, but this shouldn't be the case. I am really curious what's the issue and how this can be solved.

 

The code is as follows:

Battery =
--Define the % to be colored in:
VAR percentageArea =
DIVIDE(
[Charged],
([Charged] + [Remaining]
)
)

--Define the colors:
VAR fillColor = "#2eaf2e"
VAR backgroundColor = "#ffffff"

VAR Icon =
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' height='245.19mm' width='79.022mm' version='1.1' viewBox='0 0 280.00001 868.77628'>

<defs>
    <clipPath id='maskClip'>
    <rect x='-500' y='452.36' width='100' height='"&(1-percentageArea)* 360&"'/>
    </clipPath>
</defs>

<g id='layer1' transform='translate(-194.29 -89.403)'>
<g id='g4875' transform='matrix(2 0 0 2 1234.3 -746.54)'>
<path id='rect4820' d='m-462.68 417.97c-5.54 0-10.225 4.4646-10 10v4.3882h-27.321c-11.08 0-20 8.92-20 20v380c0 11.08 8.92 20 20 20h100c11.08 0 20-8.92 20-20v-380c0-11.08-8.92-20-20-20h-27.321v-4.3882c0-5.54-4.46-10-10-10z'/>
<g fill=' "& backgroundColor &"' >
<rect id='rect4810' height='360' width='100' y='452.36' x='-500'/>
</g>
</g>
</g>

<g id='layer1' transform='translate(-194.29 -89.403)'>
<g id='g4875' transform='matrix(2 0 0 2 1234.3 -746.54)'>
<path id='rect4820' d='m-462.68 417.97c-5.54 0-10.225 4.4646-10 10v4.3882h-27.321c-11.08 0-20 8.92-20 20v380c0 11.08 8.92 20 20 20h100c11.08 0 20-8.92 20-20v-380c0-11.08-8.92-20-20-20h-27.321v-4.3882c0-5.54-4.46-10-10-10z'/>
<g style= 'fill:"&fillColor&"; clip-path:url(#maskClip)'>
<rect id='rect4810' height='360' width='100' y='452.36' x='-500'/>
</g>
</g>
</g>

</svg>"
RETURN
Icon

 

Need Help
  • Greg_Deckler's avatar
    Greg_Deckler
    4 years ago

    Anonymous Well, for starters, you can fix 2 of the problems by doing this:

    <defs>
    <clipPath id='maskClip'>
    <rect x='-500' y='"&810 - (percentageArea) * 360&"' width='100' height='"&(percentageArea)* 360&"'/>
    </clipPath>
</defs>

4 Replies

  • Greg_Deckler's avatar
    Greg_Deckler
    Community Champion
    4 years ago

    Anonymous Well, for starters, you can fix 2 of the problems by doing this:

    <defs>
    <clipPath id='maskClip'>
    <rect x='-500' y='"&810 - (percentageArea) * 360&"' width='100' height='"&(percentageArea)* 360&"'/>
    </clipPath>
</defs>
    • Anonymous's avatar
      Anonymous
      Not applicable
      4 years ago

      Great!! That works! How did you come up with the number 810? 

  • Greg_Deckler's avatar
    Greg_Deckler
    Community Champion
    4 years ago

    Anonymous Trial and error. Moved it down until it was almost gone and then moved it by 1 pixel at a time until it disappeared.

  • tonny_bwg's avatar
    tonny_bwg
    Helper I
    3 years ago

    could you please share the final codes ? I met the same issues :
    1. the background color is is black, eventhough I the color code is #ffffff, so white. 
    Thanks 

    --Tonny