css - 填充 svg 多边形形状的一半 - 星

Question

我正在使用它，并希望将一个新的 css 类“half”添加到星形选择类中，以便只用背景色填充星形的一半:#e54800

https://foundation.zurb.com/building-blocks/blocks/star-rating.html

所以它会是:<div class="star selected half">

 .rating-block {
      padding: 2px 5px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }
    
    .rating-block .ratings-type {
      margin-right: 1rem;
      margin-bottom: 0;
    }
    
    .rating-block .rating-block {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 2rem;
    }
    
    .rating-block .rating-block-rating {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
    
    .rating-block .star {
      cursor: pointer;
      stroke: #cc4b37;
    }
    
    .rating-block .rating-block-rating .star.selected polygon {
      fill: #cc4b37;
    }
    
    .rating-block .rating-block-rating.is-voted .star polygon {
      fill: #cc4b37;
    }
    
    .rating-block .rating-block-rating.is-voted .star.selected ~ .star polygon {
      fill: transparent;
    }

<div class="rating-block">
    <div class="rating-block-rating" data-rating>
        <div class="star selected">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
            </svg>
        </div>
        <div class="star">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
            </svg>
        </div>
        <div class="star">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
            </svg>
        </div>
        <div class="star">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
            </svg>
        </div>
        <div class="star">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
            </svg>
        </div>
    </div>
</div>

Answer 1

您可以使用另一个 svg 定义渐变(以避免在每个 svg 中重复它)并将渐变与 fill 一起使用。如果您想要不同的其他 fill

，您可以轻松调整 % 值或创建更多渐变

.rating-block {
  padding: 2px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rating-block .ratings-type {
  margin-right: 1rem;
  margin-bottom: 0;
}

.rating-block .rating-block {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.rating-block .rating-block-rating {
  display: flex;
}

.rating-block .star {
  cursor: pointer;
  stroke: #cc4b37;
}

.rating-block .rating-block-rating .star.selected polygon {
  fill: #cc4b37;
}
.rating-block .rating-block-rating .star.half polygon {
  fill: url(#grad);
}

.rating-block .rating-block-rating.is-voted .star polygon {
  fill: #cc4b37;
}

.rating-block .rating-block-rating.is-voted .star.selected~.star polygon {
  fill: transparent;
}

<svg height="0" width="0">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#cc4b37;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#cc4b37;stop-opacity:1" />
      <stop offset="50%" style="stop-color:transparent;stop-opacity:1" />
      <stop offset="100%" style="stop-color:transparent;stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

<div class="rating-block">
  <div class="rating-block-rating" data-rating>
    <div class="star selected">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                    <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
                </svg>
    </div>
    <div class="star half">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                    <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
                </svg>
    </div>
    <div class="star">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                    <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
                </svg>
    </div>
    <div class="star">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                    <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
                </svg>
    </div>
    <div class="star">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
                    <polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
                </svg>
    </div>
  </div>
</div>

顺便说一句，这里有一种更简单的方法来处理评级，而无需多次使用 svg 并为填充定义渐变。您可以使用 svg 作为背景并简单地控制宽度来控制评分:

.rating{
  width: calc(45px * 5);
  height: 45px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="%23cc4b37" stroke="%23cc4b37" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
  position:relative;
}
.rating:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width: calc(45px * 5);
  z-index:-1;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="transparent" stroke="%23cc4b37" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}

<div class="rating">
</div>
<div class="rating" style="width:calc(45px * 2)">
</div>
<div class="rating" style="width:calc(45px * 2.5)">
</div>
<div class="rating" style="width:calc(45px * 4.75)">
</div>
<div class="rating" style="width:calc(45px * 1.75)">
</div>

也可以通过 CSS 变量进行改进:

.rating{
  width: calc(45px * 5);
  height: 45px;
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="transparent" stroke="%23cc4b37" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
  position:relative;
}
.rating:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width: calc(45px * var(--r,1));
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="%23cc4b37" stroke="%23cc4b37" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}

<div class="rating">
</div>
<div class="rating" style="--r:2">
</div>
<div class="rating" style="--r:2.5">
</div>
<div class="rating" style="--r:4.75">
</div>
<div class="rating" style="--r:1.75">
</div>