Float over a specific line in a drawing

Question

Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js :

My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintaining functionality. So far, I have completed the following code snippets:

* {
  background-color: blue;
}

.progress-ring__circle {
  stroke-dasharray: 25 6;
}

<svg
   class="progress-ring"
   width="120"
   height="120">
  <circle
    class="progress-ring__circle"
    stroke="grey"
    stroke-width="10"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
</svg>

The challenge now lies in detecting which section of the dash the user's cursor is on. Is there a way to achieve this using JS or CSS?

javascript html css

Answer 1

Answer №1

One approach is to create a circle using multiple paths and adding an event listener on mouseover to each path.

let paths = Array.from(document.querySelectorAll("#progress-circle .small"));
paths.forEach(function(path) {
  path.addEventListener('mouseover', function (event) {
    var target = event.target || event.srcElement;
    target.setAttribute('style', 'stroke: blue');
    document.getElementById('percentValue').textContent = target.dataset.percent;
    
    paths.forEach(function(previousPath) {
     if (parseInt(previousPath.dataset.percent) <= parseInt(target.dataset.percent)) 
     {
        previousPath.setAttribute('style', 'stroke: blue');
     } else {
        previousPath.setAttribute('style', 'stroke: grey');
     }
    });
  });
});

    * {
    }

    .progress-ring__circle {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:hover {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:nth-child(2){
        stroke: #f00; 
        position: relative;
        z-index: 1;

        
        
    }

<svg style="stroke:black; fill:none; stroke-width:2" width="400" height="400" id="progress-circle">
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="1"
        d=" M 236 105 A 100 100 288 0 1 279 133" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="2"
        d=" M 286 141 A 100 100 324 0 1 304 190" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="3"
        d=" M 305 200 A 100 100 0 0 1 292 250" />
     <path  
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="4"
        d=" M 286 259 A 100 100 36 0 1 246 291" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="5"
        d=" M 236 295 A 100 100 72 0 1 184 298" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="6"
        d=" M 174 295 A 100 100 108 0 1 131 267" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="7"
        d=" M 124 259 A 100 100 144 0 1 106 210" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="8"
        d=" M 105 200 A 100 100 180 0 1 118 150" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="9"
        d=" M 124 141 A 100 100 216 0 1 164 109" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="10"
        d=" M 174 105 A 100 100 252 0 1 226 102" />
</path>
<text id="percentValue" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0</text>    
 </svg>

Answer 2

One approach is to create a circle using multiple paths and adding an event listener on mouseover to each path.

let paths = Array.from(document.querySelectorAll("#progress-circle .small"));
paths.forEach(function(path) {
  path.addEventListener('mouseover', function (event) {
    var target = event.target || event.srcElement;
    target.setAttribute('style', 'stroke: blue');
    document.getElementById('percentValue').textContent = target.dataset.percent;
    
    paths.forEach(function(previousPath) {
     if (parseInt(previousPath.dataset.percent) <= parseInt(target.dataset.percent)) 
     {
        previousPath.setAttribute('style', 'stroke: blue');
     } else {
        previousPath.setAttribute('style', 'stroke: grey');
     }
    });
  });
});

    * {
    }

    .progress-ring__circle {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:hover {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:nth-child(2){
        stroke: #f00; 
        position: relative;
        z-index: 1;

        
        
    }

<svg style="stroke:black; fill:none; stroke-width:2" width="400" height="400" id="progress-circle">
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="1"
        d=" M 236 105 A 100 100 288 0 1 279 133" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="2"
        d=" M 286 141 A 100 100 324 0 1 304 190" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="3"
        d=" M 305 200 A 100 100 0 0 1 292 250" />
     <path  
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="4"
        d=" M 286 259 A 100 100 36 0 1 246 291" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="5"
        d=" M 236 295 A 100 100 72 0 1 184 298" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="6"
        d=" M 174 295 A 100 100 108 0 1 131 267" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="7"
        d=" M 124 259 A 100 100 144 0 1 106 210" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="8"
        d=" M 105 200 A 100 100 180 0 1 118 150" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="9"
        d=" M 124 141 A 100 100 216 0 1 164 109" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="10"
        d=" M 174 105 A 100 100 252 0 1 226 102" />
</path>
<text id="percentValue" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0</text>    
 </svg>

Float over a specific line in a drawing

Answer №1

Similar questions

Passing a parameter from AJAX to PHP

Tips for showing more rows by clicking an icon within an Angular 2 table

What is the best way to merge two approaches for tallying items within each category?

IE8 is not properly handling nested HTML elements that have the display:none property set

Angular 8 delivers an observable as a result following a series of asynchronous requests

The transition effect is not functioning properly in CSS and React.js

What could be causing the issue with this jQuery selector for the parent form element?

Using jQuery to append text after multiple element values

How to incorporate a delay in ng-repeat using AngularJS

What is the reason behind the NgForOf directive in Angular not supporting union types?

Receive a notification when the div element stops scrolling

When using $state.go in $stateChangeStart, there is a dual state transition in ui-router

Assist me in temporarily altering the color of menu items in a sequential manner upon the page's loading

jQuery, trigger a function when the document has finished loading

What is the best way to transform HeadersInit into an Object<string,string> data type?

jQuery for Revealing or Concealing Combinations of Divs

Navigating through nested JSON objects in React to display data effectively

ng-class expressions are constantly evolving and adapting

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

Integrate a Google Maps API Javascript into a Flex application