CODEWITHSUNDEEP
htmlcsssvg
Marvin3
Marvin3

Reputation: 6041

Pass variable from CSS or HTML to inline SVG

I'm trying to make very light SVG star rating component using only single svg.

I have a shape with 5 stars and I'm filling them with horizontal gradient.

Here it is, run code snippet:

<svg width="68" height="11" viewBox="0 0 68 11">
  <linearGradient id="grad">
        <stop offset="70%" stop-color="tomato"/>
        <stop offset="70%" stop-color="grey"/>
   </linearGradient>
  <g fill="url(#grad)">
    <path d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/>
  </g>
</svg>

The rating can be decimal (not only "full" star and "half-star"), it can even be something like 3.35.

The issue is - I do not know how do define offset="70%" dynamically.

Upvotes: 2

Views: 526

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

You can use your SVG as a background and you will be able to easily control the size:

.rating {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="grey" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
  width: 68px;
  height: 11px;
}

.rating:before {
  content: "";
  display: block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="tomato" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
  height: 100%;
  width: var(--p, 50%);
}
<div class="rating"></div>
<div class="rating" style="--p:20%"></div>
<div class="rating" style="--p:80%"></div>
<div class="rating" style="--p:100%"></div>

For better support you can replace CSS variable with classic CSS:

.rating {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="grey" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
  width: 68px;
  height: 11px;
}

.rating > div {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="11" viewBox="0 0 68 11"><path fill="tomato" d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/></svg>');
  height: 100%;
  width:50%;
}
<div class="rating"></div>
<div class="rating" ><div style="width:20%"></div></div>
<div class="rating" ><div style="width:80%"></div></div>
<div class="rating" ><div style="width:100%"></div></div>

Upvotes: 3

3rdthemagical
3rdthemagical

Reputation: 5350

You can use svg clipping.

.rating {
  position: relative;
  height: 11px;
  width: 68px;
  background: grey;
  clip-path: url(#myClip);
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: tomato;
}
<svg width="68" height="11" viewBox="0 0 68 11">
  <defs>
    <clipPath id="myClip">
      <path d="M6 8.84L9.708 11l-.984-4.07L12 4.192l-4.314-.354L6 0 4.314 3.838 0 4.192 3.276 6.93 2.292 11zM20 8.84L23.708 11l-.984-4.07L26 4.192l-4.314-.354L20 0l-1.686 3.838L14 4.192l3.276 2.738-.984 4.07zM34 8.84L37.708 11l-.984-4.07L40 4.192l-4.314-.354L34 0l-1.686 3.838L28 4.192l3.276 2.738-.984 4.07zM48 8.84L51.708 11l-.984-4.07L54 4.192l-4.314-.354L48 0l-1.686 3.838L42 4.192l3.276 2.738-.984 4.07zM62 8.84L65.708 11l-.984-4.07L68 4.192l-4.314-.354L62 0l-1.686 3.838L56 4.192l3.276 2.738-.984 4.07z"/>
    </clipPath>
  </defs>
</svg>

<div class="rating">
  <div class="fill" style="width: 55%;"></div>
</div>
<div class="rating">
  <div class="fill" style="width: 80%;"></div>
</div>

Upvotes: 1

Related Questions