SVG Star Rating system designed to accommodate ratings with decimal points

I am struggling with creating a star rating using SVG for the first time. I need the rating to be out of 5 and display decimal ratings like 4.5, 3.2, 1.1 along with whole stars. The rated stars should be yellow while the remaining stars should be grey. How can I adjust the example below to move the star rating left and right to accommodate decimal values?

Check out the fiddle example here: http://jsfiddle.net/apbuc773/10/

Here is the code snippet: 

<svg height="210" width="500" fill="url(#g)">
      <polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
 203.042, 152.639,
 176.756, 148.820,
 165.000, 125.000,
 153.244, 148.820,
 126.958, 152.639,
 145.979, 171.180,
 141.489, 197.361,
 165.000, 185.000" style="stroke: red;"/>
    <linearGradient y2="0.9733" x2="1" id="g" x1="0.0167" y1="0.9833">
<stop stop-color="#F00" offset="0.4733"/>
<stop stop-color="rgb(255, 255, 255)" offset="0.5033"/>
</linearGradient>
    </svg>

Do I need all this code for 5 stars, or can it be simplified?

Appreciate any guidance.

angularjshtmlcsssvg

Answer №1

Check out the Fiddle below featuring dots: http://jsfiddle.net/cnLHE/296/

In this Fiddle, you can add a rectangle below masked elements. The rectangle in this example has a width of 90, which is equivalent to 90% (at the very bottom).

<rect x="0" y="0" width="90" height="20" style="fill:#2498c7; mask: url(#mask5)"/>

If you change the width from 90 to 55, the underlying fill will shrink accordingly.

Note: I eventually abandoned this approach as it did not work well when there were more than 20 instances on a page. For instance, when loading a grid of rated products, the ratings graphic would sometimes disappear in Chrome. Using JavaScript methods proved to be more reliable in such cases.

Answer №2

To modify the <linearGradient> using JavaScript, you can apply the following code snippet.

function adjustGradient(value)
{
    document.getElementById("stop1").setAttribute("offset", value);
    document.getElementById("stop2").setAttribute("offset", value);
}

adjustGradient(0.4);
<svg height="210" width="500">
  <polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
 203.042, 152.639,
 176.756, 148.820,
 165.000, 125.000,
 153.244, 148.820,
 126.958, 152.639,
 145.979, 171.180,
 141.489, 197.361,
 165.000, 185.000" style="stroke:red; fill:url(#g)"/>
  <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
    <stop id="stop1" stop-color="#F00" offset="0.5"/>
    <stop id="stop2" stop-color="#fff" offset="0.5"/>
  </linearGradient>
</svg>

If you prefer not to use JavaScript, you can create 11 different variations of the star (unfilled, 0.1, 0.2 ... 0.9, filled) and include the appropriate one.

Answer №3

To adjust the rating, simply change the offset fields from 0 (empty) to 1 (filled).

It seems redundant to specify the color red in two different ways, and the variation in offset values is confusing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a concise summary of written content

I am interested in creating an AI-powered summary generator for text input within a textarea element. Below is the HTML code snippet I have been working with: <textarea id="summary">Enter your text here</textarea> If you hav ...

javascripthtmltextartificial-intelligence

What is the process for delivering a promise?

In the context of my Angular application, I am facing a requirement where the method getData() must consistently return a promise. Should data be present in local storage and not null, it should be returned as a promise without requiring the $http.get func ...

javascriptangularjspromise

Is AngularJS not able to effectively manage the button type "reset"?

I currently have the following code snippet: <form name="editor"> <h2>Create/Update</h2> {{ editor.title.$error.required }} <div ng-class="{ 'has-error': editor.title.$invalid && editor.title.$dirty, &apo ...

javascriptformsangularjsvalidation

I'm looking to include a field card into the to-do table I built using .Net, but I'm not sure where I made a mistake

HTML Challenge I have set a goal to dynamically add a DOM element using JavaScript when the "Add HTML Element" button is clicked. The process involves clicking the button, which opens a modal for inputting necessary information. After fil ...

javascripthtmlasp.net-mvcdom

What is the reasoning behind utilizing the "&" selector in CSS?

.navigation { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: translation: all ease 0.25s; &.expand { transform: translateX(0); } } JavaScript file: $(document).ready(func ...

htmljquerycssbootstrap-4

Extract values from HTML IDs and store them in an array

Currently, I am working on a project where I need to capture a QR code and display it on the screen. After that, I want to iterate through the elements using a for loop and save the values in an array. Specifically, I am using the ID id="scanned-resul ...

javascripthtmlasp.net-mvc

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

htmlcsshtml-listsborder

Increasing margin and padding by a factor of two, achieved through the utilization of float and

Whenever I apply float or inline-block to elements, I notice that their margin or padding appears to be doubled. For example, the margin between the middle and bottom sections is set to 5%. However, the size of the top section is also 5%, but it is only ha ...

htmlcss

Show or hide a fixed position div using jQuery when clicked

I am new to jQuery and I am trying to create a "full page menu" on my own. However, I am struggling to hide the menu on the second click. I tried using .toggle() but I found out that it has been deprecated. Can someone assist me with this? Thank you so muc ...

javascriptjqueryhtmlcsshide

Steps for organizing a list based on the number of clicks

I've created an HTML list with images of political party logos. Each logo is a grid item that can be clicked on. I want to sort the list based on the number of clicks each logo receives, essentially ranking them by popularity. However, I'm not su ...

javascripthtmlcss

Steps to import an excel file by clicking a button in an Angular application

Our project requires displaying an Excel file when a menu button is clicked. https://i.sstatic.net/9tas1.png When a new tab is opened, I would like to showcase the Excel file that is saved on my personal computer. The format of the Excel file should resem ...

htmlangularjsexcel

CSS border margin-bottom attribute not functioning correctly

I am trying to create a page border by wrapping it around the content using a <div> element. The parent element is the actual page itself. However, I'm having trouble with the margin-bottom property as it doesn't seem to be working properly ...

htmlcssbordermargin

Using CSS GRID for creating layouts with customized grid-template-areas that include empty cells and automatic placement

Struggling with implementing the css grid layout module to showcase a 12-column, 3-row grid. The initial row should only contain two elements, positioned on each side of the grid with empty cells in between using ten periods. Subsequent rows should autom ...

htmlcsscss-grid

The logo appears perfectly sized in CodePen, but it seems oversized in the Outlook email template

My email template (HTML with inline CSS) features a logo with a fixed width and height (px). Oddly, after receiving an email using this template, the logo expanded to fill the entire page width. I attempted to add !Important to the width and height propert ...

htmlcssemailoutlookhtml-email

Tips for inserting a value into an HTML field using ASP.NET code behind

Recently, I created an application in JavaScript by utilizing HTML fields in ASP.NET. Due to some issues with the IDs, I had to resort to using HTML fields instead of ASP text boxes. Surprisingly, the HTML fields are functioning well with JavaScript. Now ...

c#asp.nethtmlvisual-studio

Text will not be displayed when it is written on images

I'm currently facing a challenge with adding text onto two different images, one on the left and one on the right. I have included HTML and CSS code but it seems to be incorrect. Can someone please help me fix it? #container { width: 400px; hei ...

htmlcss

What steps can I take to troubleshoot a non-functional button in a Bootstrap 5 Modal?

I have a Django based web site that utilizes Bootstrap 5 for styling. Among the data presented on the site is a table with a notes column containing lengthy text. To enhance readability and keep the table compact, I attempted to integrate the Bootstrap Mod ...

javascripthtmldjangobootstrap-modalbootstrap-5

Challenges with Initializing Angular 2 Router

I'm encountering a problem with the Angular 2 Router. My goal is to navigate through my application using a function that utilizes the navigate function from the Router, similar to how it's done in the official example. Here's what I curren ...

angularjsroutesangular

Albania's Interactive Mapping Tool

I am interested in creating an interactive map similar to the one found at using jQuery and SVG, however I am not sure where to begin. I have the map saved as a .svg.xml file (available here: albania.xml) but I am unsure of what steps to take next. Can an ...

jqueryxmlhtmlsvg

jQuery script for reversing the collapse/expand feature

Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...

jquerycss