Как перевести число в другое значение?

298

14 июля 2017, 02:45

Есть числовые значения рейтинга от 0 до 10 . Числа рейтинга имеют одно число после точки, то есть могут быть числа 4.5 , 6.7 и т. д. Задача стоит в том, чтобы перевести данные значения в 5 звезд. При этом одна звезда может еще делится на 12 значений. Например значения рейтинга 5 получается значит закрашено 2 звезды и половина 3 звезды. Сложность в том, что не могу придумать как перевести данные рейтинги в другие. Подскажите как это можно реализовать? на всякий случай кидаю код svg, чтобы визуально можно было понять как выглядят звезды

<div class="mainBlock"> 
<svg  class="star" version="1.1" 
                                  
                                 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                                 width="26px" 
                                 height="24px" 
                                 viewBox="-3.5 127.5 16 14" 
                                 enable-background="new -3.5 127.5 16 14" 
                                 xml:space="preserve"> 
                                        <path class="bgstar12" display="none" fill="#F4D337" d="M4.499,138.283l-3.442,1.615l0.473-3.771l-2.602-2.773l3.735-0.719 
                                            l1.836-3.334l1.839,3.332l3.734,0.717l-2.601,2.775l0.473,3.773L4.499,138.283z"/> 
                                <polygon id="rating11" display="none" fill="#F4D337" points="9.5,133.96 9.5,133.24 6.338,132.633 4.499,129.301 2.663,132.635 
                                            -1.072,133.354 1.529,136.127 1.057,139.898 4.499,138.283 7.944,139.898 7.472,136.125 "/> 
                                <polygon id="rating10" display="none" fill="#F4D337" points="8.5,135.027 8.5,133.048 6.338,132.633 4.499,129.301 2.663,132.635 
                                            -1.072,133.354 1.529,136.127 1.057,139.898 4.499,138.283 7.944,139.898 7.472,136.125 "/> 
                                <polygon id="rating9" display="none" fill="#F4D337" points="7.5,136.352 7.472,136.125 7.5,136.095 7.5,132.855 6.338,132.633 
                                            4.499,129.301 2.663,132.635 -1.072,133.354 1.529,136.127 1.057,139.898 4.499,138.283 7.5,139.69 "/> 
                                <polygon id="rating8" display="none" fill="#F4D337" points="6.5,132.664 6.338,132.633 4.499,129.301 2.663,132.635 
                                            -1.072,133.354 1.529,136.127 1.057,139.898 4.499,138.283 6.5,139.222 "/> 
                                <polygon id="rating7" display="none" fill="#F4D337" points="5.5,131.114 4.499,129.301 2.663,132.635 -1.072,133.354 
                                            1.529,136.127 1.057,139.898 4.499,138.283 5.5,138.753 "/> 
                                <polygon id="rating6" display="none" fill="#F4D337" points="4.5,129.303 4.499,129.301 2.663,132.635 -1.072,133.354 
                                            1.529,136.127 1.057,139.898 4.499,138.283 4.5,138.283 "/> 
                                <polygon id="rating5" display="none" fill="#F4D337" points="3.5,138.752 3.5,131.115 2.663,132.635 -1.072,133.354 1.529,136.127 
                                            1.057,139.898 "/> 
                                <polygon id="rating4" display="none" fill="#F4D337" points="2.5,139.222 2.5,132.666 -1.072,133.354 1.529,136.127 1.057,139.898 
                                            "/> 
                                <path id="rating3" display="none" fill="#F4D337" d="M1.5,139.69l-0.443,0.208L1.5,136.36V139.69z M1.5,132.858l-2.572,0.495 
                                            l2.572,2.742V132.858z"/> 
                                <polygon id="rating2" display="none" fill="#F4D337" points="0.5,133.051 -1.072,133.354 0.5,135.029 "/> 
                                <polygon id="rating1" display="none" fill="#F4D337" points="-0.5,133.243 -1.072,133.354 -0.5,133.964 "/> 
                                <path id="linestar" fill="#F4D337" d="M11.865,132.85L6.929,131.9l-2.43-4.4l-2.427,4.398l-4.938,0.949l3.438,3.666l-0.625,4.986 
                                            l4.554-2.135l4.553,2.135l-0.623-4.984L11.865,132.85z M4.499,138.295l-3.443,1.615l0.473-3.771l-2.602-2.773l3.736-0.719 
                                            l1.836-3.334l1.839,3.332l3.735,0.717l-2.602,2.775l0.473,3.773L4.499,138.295z"/> 
                                    </svg> 
                                     
                                    </div>