star rating with SVGs

Question

hi i've seen this post all over the site, read dozens of comments really valuable but im not finding the way out. I want to make the usual star rating with an SVG but somehow the SVG seems to have problems. Thanks in advance!

just to see what I want to do: https://jsfiddle.net/mkrzen1v/4/ (the previous sibling of each heart does not change color)

span {width:20px; height:20px;float:left;margin-right:5px}
    .corazonSVG{fill:grey}
    span .corazonSVG:hover, span .corazonSVG:hover ~ span{fill:blue;}

<span>
  <svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>

I wrote a Dev.to post on this, using a modern Web Component. You only have to replace the star d-path with your (inverted) heart d-path: https://dev.to/dannyengelman/twinkle-twinkle-web-component-star-23d7 — Danny '365CSI' Engelman, May 13 '21 at 12:36

dave · Answer 1 · 2021-05-13T05:16:36.217

If you open the contents of your SVG in a browser you'll see it's got some syntax errors in it: Chrome says the following: error on line 1 at column 78: Entity 'ns_extend' not defined.

If you remove these non-standard properties from the SVG you end up with the following:

<svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg>

Loading this in the browser now works, but you've got a new problem - this isn't a star...

Try replacing your SVG with the following:

<svg class="corazonSVG" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>

Edit: I've realised that hearts are perfectly reasonable to use for ratings but have left in the star SVG just in case this was a mistake!

Dear Dave, thanks for your quick answer. Haha, yes you're right, it's not a star but we wanted to show hearts as it is a review and the heart also fits. The problem I'm having is that even though I remove the chrome syntax error, it still does not work. I can hover over every single heart but cannot make the previous heart painted. I wanted to do something like this: https://stackoverflow.com/a/63881411/3202909 I've uploded the example I've made: https://jsfiddle.net/mkrzen1v/2/ Thanks again for your help!!!! — user3202909, May 13 '21 at 05:57

score 0 · Answer 2 · answered May 13 '21 at 14:02

I've just find the problem, each svg was inside a span, i deleted each span and that solved the issue https://jsfiddle.net/kfqa5gcb/

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>
<br>
<div></div><div></div><div></div><div></div><div></div>

span,div {width:20px; height:20px;display:inline-block;margin-right:5px}
.corazonSVG{fill:grey}
div{background-color:grey}
span .corazonSVG:hover, span .corazonSVG:hover ~ span{fill:blue;}
div:hover, div:hover ~ div{background-color:yellow;}

star rating with SVGs

2 Answers2