Question

嗨，我在整个网站上都看到了这篇文章，阅读了数十条非常有价值的评论，但我没有找到出路。我想用 SVG 进行通常的星级评定，但不知何故 SVG 似乎有问题。提前致谢！

只是看看我想做什么：https://jsfiddle.net/mkrzen1v/4/（每颗心的前一个兄弟不变色）

span {width:20px; height:20px;float:left;margin-right:5px}
    .corazonSVG{fill:grey}
    span .corazonSVG:hover, span .corazonSVG:hover ~ span{fill:blue;}

<span>
  <svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>
<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve">
    <metadata>
      <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds>
      </sfw>
    </metadata>
    <path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z" />
  </svg></span>

Answer 1

如果您在浏览器中打开 SVG 的内容，您会看到其中存在一些语法错误：Chrome 显示以下内容：error on line 1 at column 78: Entity 'ns_extend' not defined。

如果您从 SVG 中删除这些非标准属性，您最终会得到以下结果：

<svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg>

现在可以在浏览器中加载它了，但是你遇到了一个新问题——这不是一个明星......

尝试用以下内容替换您的 SVG：

<svg class="corazonSVG" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>

编辑：我已经意识到红心用于评分是完全合理的，但为了以防万一这是一个错误，它留在了星形SVG中！

Answer 2

我刚刚找到问题，每个 svg 都在一个跨度内，我删除了每个跨度并解决了问题 https://jsfiddle.net/kfqa5gcb/

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>

<span><svg class="corazonSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 226 206" style="enable-background:new 0 0 226 206;" xml:space="preserve"><metadata><sfw><slices></slices><sliceSourceBounds  bottomLeftOrigin="true" height="184.1" width="202" x="400" y="-593.1"></sliceSourceBounds></sfw></metadata><path d="M113,40.3c0,0-15.6-29.3-49-29.3S12,37,12,64.5c0,43.9,32.5,70.7,58.6,92.8c24.3,20.5,42.4,37.8,42.4,37.8 s18.1-17.3,42.4-37.8c26.2-22.1,58.6-48.9,58.6-92.8c0-27.5-18.6-53.6-52-53.6S113,40.3,113,40.3z"/></svg></span>
<br>
<div></div><div></div><div></div><div></div><div></div>

span,div {width:20px; height:20px;display:inline-block;margin-right:5px}
.corazonSVG{fill:grey}
div{background-color:grey}
span .corazonSVG:hover, span .corazonSVG:hover ~ span{fill:blue;}
div:hover, div:hover ~ div{background-color:yellow;}

使用 SVG 进行星级评分

2 个答案: