SVG 和 SCSS 5 星评级：悬停不起作用

Question

我一直在尝试仅使用 SCSS 获得 SVG 5 星评级，并且我关注了 this 来源。原始链接使用 font-awesome，而我正在尝试使用 SVG。但是，我无法让悬停工作（即在悬停时改变星星的颜色）。

SCSS

$icons: (
        "half-star":
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19"><path d="M20 7.2c-0.1-0.4-0.4-0.6-0.8-0.7l-5.7-0.8 -2.5-5.1C10.7 0.2 10.4 0 10 0c0 0 0 0 0 0l0 0C9.6 0 9.2 0.2 9 0.6L6.5 5.7l-5 0.7L0.9 6.5c0 0 0 0 0 0l0 0c0 0-0.1 0-0.1 0 -0.1 0-0.1 0-0.2 0.1 -0.1 0-0.2 0.1-0.2 0.1 0 0 0 0 0 0 -0.1 0-0.1 0.1-0.2 0.2 0 0 0 0 0 0 0 0 0 0.1-0.1 0.1 0 0-0.1 0.1-0.1 0.1 0 0.1 0 0.2 0 0.3C0 7.7 0.1 8 0.3 8.2l4.1 4 -1 5.6c-0.1 0.4 0.1 0.8 0.4 1C4.1 19 4.4 19 4.6 19c0.1 0 0.2 0 0.3-0.1l5.1-2.7 0.1 0v0l5.1 2.7c0.3 0.2 0.8 0.2 1.1-0.1 0.3-0.2 0.5-0.6 0.4-1l-1-5.6 4.1-4C20 7.9 20.1 7.5 20 7.2zM13.9 10.9c-0.2 0.2-0.4 0.6-0.3 0.9l0.8 4.2 -3.8-2c-0.1-0.1-0.3-0.1-0.5-0.1V3.1l1.9 3.8c0.2 0.3 0.4 0.5 0.8 0.6L17 8 13.9 10.9z"/></svg>',
        "full-star":
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="luna-icon-star-stroke"><path d="M7.813 18.663l3.718-1.973a1 1 0 0 1 .938 0l3.718 1.973-.727-4.146a1 1 0 0 1 .29-.891l3.025-2.927-4.168-.59a1 1 0 0 1-.758-.55L12 5.776l-1.849 3.781a1 1 0 0 1-.758.551l-4.168.59 3.026 2.927a1 1 0 0 1 .29.89l-.728 4.147zm-.87 2.725a1 1 0 0 1-1.453-1.056l.989-5.638-4.114-3.98a1 1 0 0 1 .555-1.709l5.668-.802 2.514-5.142a1 1 0 0 1 1.796 0l2.514 5.142 5.668.802a1 1 0 0 1 .555 1.709l-4.114 3.98.99 5.638a1 1 0 0 1-1.454 1.056L12 18.706l-5.057 2.682z" fill-rule="evenodd"></path></svg>'
);

$star-color: #A5C6FF;
$border-color: #3B63F9;
$empty-color: #FFFFFF;

$data-svg-prefix: "data:image/svg+xml;utf-8,";

.starRating {
  fieldset {
    margin: 0;
    padding: 0;
  }

  label {
    margin: 0;
    padding: 0;

    &:before {
      height: 1rem;
      width: 1rem;
      content: " ";
      display: block;
    }
  }

  .rating {
    border: none;
    float: left;

    > input {
      display: none;

      &:checked {
        ~ {
          label {
            color: $star-color;

            &:hover {
              color: $star-color;

              ~ {
                label {
                  color: $star-color;
                }
              }
            }
          }
        }

        + {
          label {
            &:hover {
              color: $star-color;
            }
          }
        }
      }
    }

    > label {
      &:before {
        margin: 5px;
        font-size: 1.25em;
        display: inline-block;
        background-image: url($data-svg-prefix + map-get($icons, "full-star"));
      }

      color: $empty-color;
      float: right;

      &:hover {
        ~ {
          input {
            &:checked {
              ~ {
                label {
                  color: $star-color;
                }
              }
            }
          }
        }
      }
    }

    > .half {
      &:before {
        background-image: url($data-svg-prefix + map-get($icons, "half-star"));
        position: absolute;
      }
    }

    &:not(:checked) {
      > label {
        &:hover {
          color: $star-color;

          ~ {
            label {
              color: $star-color;
            }
          }
        }
      }
    }
  }
}

HTML：

<fieldset class="rating">
  <input type="radio" id="star5" name="rating" value="5"><label class="full" for="star5" title="5 stars"></label><input
    type="radio" id="star4.5" name="rating" value="4.5"><label class="half" for="star4.5"
    title="4.5 stars"></label><input type="radio" id="star4" name="rating" value="4"><label class="full" for="star4"
    title="4 stars"></label><input type="radio" id="star3.5" name="rating" value="3.5"><label class="half" for="star3.5"
    title="3.5 stars"></label><input type="radio" id="star3" name="rating" value="3"><label class="full" for="star3"
    title="3 stars"></label><input type="radio" id="star2.5" name="rating" value="2.5"><label class="half" for="star2.5"
    title="2.5 stars"></label><input type="radio" id="star2" name="rating" value="2"><label class="full" for="star2"
    title="2 stars"></label><input type="radio" id="star1.5" name="rating" value="1.5"><label class="half" for="star1.5"
    title="1.5 stars"></label><input type="radio" id="star1" name="rating" value="1"><label class="full" for="star1"
    title="1 stars"></label><input type="radio" id="star0.5" name="rating" value="0.5"><label class="half" for="star0.5"
    title="0.5 stars"></label>
</fieldset>

Codepen：https://codepen.io/amir734jj/pen/abNYZyo

Answer 1

您正在使用 background-image 属性加载 SVG。然后您的 SVG 将成为图像/文件。您不能使用任何属性影响其颜色或背景。

如果您只想使用 SCSS 代码执行此操作，则必须将所需的每个 SVG 变体添加到 $icons : (...)，例如 "half-star-blue" 等，然后在悬停时更改 background-image 属性。 但是，您将无法为此属性使用任何转换。

另外，不建议这样做。如果你有 SVG 代码，你应该把它放在你的 HTML 中，这样你就可以用 fill 属性改变它的颜色。

使用和更改 SVG 最方便的方法是将其放入您的 html 代码中，而不是放入 css 中。 由于您的星星和半星被重复使用，因此最好的方法是将 then 定义为 SVG 标签中的符号，然后像这样使用 use 标签（这只是一个示例，根据需要修改颜色等；我还必须修改一些你的 svg 图标，以便显示效果更好）： https://codepen.io/aurelienbobenrieth/pen/bGpvgwo