Skip to main content

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?

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

Terms & ConditionsCookie settings