Solved

5 star rating (Thinkstore) and Universal

  • 23 August 2022
  • 1 reply
  • 100 views

Userlevel 5
Badge +16
  • Thinkwise Local Partner Brasil
  • 387 replies

Anyone adept here in SVG and the Star Rating solution in the ThinkStore. It doesn't seem to work in the Universal. Whatever I do I always get back one black star. 

 

This gets generated:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 24" width="120px" height="24px">
<defs>
<linearGradient id="star_1"><stop offset="0%" stop-color="orange"></stop><stop offset="100%" stop-color="orange"></stop>
</linearGradient>
<linearGradient id="star_2" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" stop-color="orange"></stop><stop offset="100%" stop-color="orange"></stop>
</linearGradient>
<linearGradient id="star_3" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" stop-color="orange"></stop><stop offset="100%" stop-color="orange"></stop>
</linearGradient>
<linearGradient id="star_4" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" stop-color="grey"></stop><stop offset="100%" stop-color="grey"></stop>
</linearGradient>
<linearGradient id="star_5" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" stop-color="grey"></stop><stop offset="100%" stop-color="grey"></stop>
</linearGradient>
</defs>


<path id="B" d="M21.983,8.916h-6.784c-0.204,0-0.386-0.13-0.453-0.323l-2.292-6.621c-0.149-0.43-0.758-0.43-0.907,0L9.254,8.594 C9.187,8.787,9.006,8.917,8.802,8.917L2.016,8.934c-0.458,0.001-0.654,0.581-0.291,0.86l5.392,4.145 c0.157,0.121,0.224,0.326,0.168,0.516l-1.941,6.576c-0.128,0.433,0.359,0.787,0.732,0.531l5.654-3.877 c0.164-0.112,0.379-0.112,0.543,0l5.654,3.877c0.372,0.255,0.859-0.098,0.732-0.532l-1.941-6.576 c-0.056-0.19,0.01-0.395,0.167-0.516l5.394-4.165C22.638,9.496,22.441,8.916,21.983,8.916z" stroke-width="1" stroke="black"></path>







</svg>

 

In the code it has extra code, which appears to be missing and might be the reason why I only see one star:

<use width="120px" height="24px" xlink:href="#B" x="1px" fill="url(#star_1)"/>
<use width="120px" height="24px" xlink:href="#B" x="24px" fill="url(#star_2)"/>
<use width="120px" height="24px" xlink:href="#B" x="48px" fill="url(#star_3)"/>
<use width="120px" height="24px" xlink:href="#B" x="72px" fill="url(#star_4)"/>
<use width="120px" height="24px" xlink:href="#B" x="96px" fill="url(#star_5)"/>

Any ideas out there?

icon

Best answer by Erik Brink 23 August 2022, 11:37

View original

This topic has been closed for comments

1 reply

Userlevel 5
Badge +5

Hi Freddy, 

Thanks for reporting this. We did some research on this and we found out that our Universal GUI strips unwanted items from SVG icons (source) for security reasons. In the past we've had some issues of SVG icons which did not show up as expected.

In this case, content to decide the appearance is stripped from the SVG icon. Could you please bring up an TCP ticket for this?

Kind regards,
Erik