Stars don't change size + are displayed vertically

[CharleyCattac]

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]

Could you put a live example online?

[kerbong]

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.

3. 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"><style type="text/css">.svg-empty-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + 'SVGID_1);}.svg-hovered-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + 'SVGID_2);}.svg-active-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + 'SVGID_3);}.svg-rated-' + this._uid + '{fill:' + s.ratedColor + ';}</style>' +

  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.