文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVGs的星级评分

问SVGs的星级评分
EN

Stack Overflow用户
提问于 2021-05-13 12:36:16
回答 2查看 55关注 0票数 0

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

看看我想做什么：https://jsfiddle.net/mkrzen1v/4/ (每个心的前一个兄弟姐妹的颜色不变)

​

代码语言：javascript
复制
span {width:20px; height:20px;float:left;margin-right:5px}
    .corazonSVG{fill:grey}
    span .corazonSVG:hover, span .corazonSVG:hover ~ span{fill:blue;}
代码语言：javascript
复制
<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>

​

css
svg
EN

回答 2

Stack Overflow用户

发布于 2021-05-13 13:00:56

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

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

代码语言：javascript
复制
<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替换为以下内容：

代码语言：javascript
复制
<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以防这是一个错误！

票数 0
EN

Stack Overflow用户

发布于 2021-05-13 22:02:44

我刚刚找到了问题所在，每个svg都在一个范围内，我删除了每个范围，这解决了问题https://jsfiddle.net/kfqa5gcb/

代码语言：javascript
复制
<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>

​

代码语言：javascript
复制
<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;}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67513936

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档