search

nashio / star-rating-svg

A star rating jQuery plugin that uses SVG for easier customization
http://nashio.github.io/star-rating-svg/demo
MIT License
355 stars 156 forks source link

Stars don't change size + are displayed vertically #48

Open CharleyCattac opened 4 years ago

CharleyCattac commented 4 years ago

Hello! First i tried with my own code, then i just copied your demo page (without demo.css though). Both times i faced same problem:

изображение изображение

Stars are big (i suppose it's their default size??) and displayed vertically, not horizontally When i change starSize only thing that changes is the "box" where the stars are supposed to be

I downloaded css and js files from src

nashio commented 4 years ago

Could you put a live example online?

kerbong commented 3 years ago

I got an same error. I'm not sure that it is the best way, but it works on my project.

  1. jquery.star-rating-svg.js in your file

find starShape! and change the code Bold text. **_ part

getSvgDimensions: function(starShape){
  return (starShape === 'rounded') ? '**_width="30px" height="30px"_** viewBox="0 146.8 550 500.2" style="enable-background:new 0 0 550 500.2;' : 'x="0px" y="0px" width="305px" height="305px" viewBox="60 -62 309 309" style="enable-background:new 64 -59 305 305;';

2.html file in your file

$(".my-rating").starRating({ initialRating: 3, strokeColor: '#894A00', strokeWidth: 10, starSize: 35, starShape: 'rounded' << add this line });

then you can change your star size. (put the size you want in starShape width)

maybe... if you change the starsize, stars may verticalized.

  1. jquery.star-rating-svg.js in your file

find star and ... change div to span (i already changed it, bold and italic text) **_ part

var star = '<span class="jq-star" style="width:' + s.starSize+ 'px; height:' + s.starSize + 'px;"><svg version="1.0" class="jq-star-svg" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" ' + this.getSvgDimensions(s.starShape) + ' stroke-width:' + s.strokeWidth + 'px;" xml:space="preserve">' +

  this.getLinearGradient(this._uid + '_SVGID_1_', s.emptyColor, s.emptyColor, s.starShape) +
  this.getLinearGradient(this._uid + '_SVGID_2_', s.hoverColor, s.hoverColor, s.starShape) +
  this.getLinearGradient(this._uid + '_SVGID_3_', s.starGradient.start, s.starGradient.end, s.starShape) +
  this.getVectorPath(this._uid, {
    starShape: s.starShape,
    strokeWidth: s.strokeWidth,
    strokeColor: s.strokeColor
  } ) +
  '</svg></**_span_**>' ;

I hope it helpful.. Take care.