程序员经验分享-hwhale

使用 SVG 仅填充半颗星

2024-01-15

对于我正在构建的评级系统。有没有办法向这个 svg 示例添加一个 css 类，以便它只显示填充的一半星号？

参见jsbin：http://jsbin.com/cifip/2/ http://jsbin.com/cifip/2/

在此示例中，当前填充为黄色。如果我添加班级 is-half 我希望它显示半灰色并有黄色。

这在 SVG 中可能吗？


创建一个线性渐变来填充星星。 2 个站点确保即时过渡。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 32 32">
    <defs>
      <linearGradient id="grad">
        <stop offset="50%" stop-color="yellow"/>
        <stop offset="50%" stop-color="grey"/>
      </linearGradient>
    </defs>
    <path fill="url(#grad)" d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,12.118
  l11.547-1.2L16.026,0.6L20.388,10.918z"/>
  </svg>

然后将星星的填充设置为此。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

使用 SVG 仅填充半颗星 的相关文章

  • CSS3 与 JavaScript

    所以我试图在网页上创建一个动画 并试图找到一种使用 CSS3 来实现它的方法 但我对如何做到这一点感到非常困惑 我需要发生的是 当用户单击链接元素时 我希望 div 展开并填充特定于所单击的链接元素的内容 例如 当用户单击标题为 About

  • 如何缩放 SVG 路径以适应窗口大小？

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是

  • Bootstrap .row margin-left: -15px - 为什么它会缩进（来自文档）

    我在 Bootstrap 文档中看到了这一行 http getbootstrap com css grid intro http getbootstrap com css grid intro It says 列通过填充创建装订线 列内容之

  • iPhone 4 上不稳定的 CSS3 动画

    我有一个非常简单的 或者至少我认为是 动画 我所做的只是 webkit background size 的动画 bubble position relative width 397px height 326px background url

  • 如何使div垂直滚动[重复]

    这个问题在这里已经有答案了 我用图片元素列表做了一个水平滚动 但是当我垂直滚动它时我失败了 我的水平滚动条代码是 div class pic container div class pic row div style width 100 a

  • 动画和过渡的组合无法正常工作

    我一直在尝试添加一些基本的 CSS3 动画 目标是在按钮的单击事件上切换类 并根据添加的类对 div 进行动画处理 该代码对于 Firefox 中切换的第一次迭代完美运行 但对于 Chrome 等其他浏览器以及 Firefox 中的下一次迭

  • SVG 过滤器在 Firefox 中不显示，在 Chrome 中工作正常

    我想要深色背景上的一段深色文本外面有白色的光芒 虽然默认阴影滤镜 https developer mozilla org en US docs Web CSS filter drop shadow 2在 CSS 中 比如filter dro

  • 等高列并将最后一项与底部对齐

    我有一个列表 其中每个li有嵌套容器 我尝试为所有列表项保留相同的高度 并将最后一个 div 推到底部 我将如何使用 flex 来做到这一点 ul list container display inline flex justify con

  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式

  • 如何使用CSS缩进多级select optgroup？

    只是试图通过嵌套深度缩进 optgroup 块 我尝试了一般margin left规则 嵌套元素然后尝试应用相同的规则 尝试过padding left 这样的缩进可能吗 看起来很简单 P 在下面的示例中 标记为 client2 a 的 op

  • 悬停时从下到上填充按钮背景，从下到上填充文本颜色

    我需要创建按钮 并且在悬停时它不仅必须从下到上填充背景颜色 而且还必须从下到上更改文本颜色 我对这里的方法很满意 CSS 悬停时背景从下到上填充 https stackoverflow com questions 51562340 css

  • 如何让 jstree 节点显示长的、可能是多行的内容？

    当使用jsTree插件 http www jstree com 我需要有一个显示其完整内容的节点 目前 每个节点仅显示大约一行文本 如何让 jsTree 中的节点显示节点中的所有文本而不截断节点的内容 下面的 CSS 代码就可以解决这个问题

  • CSS 属性选择器类以以下开头但不等于

    我想将 css 应用于以 abcd 开头的所有类 但我不想将该 css 应用于名称为 abcd dontapply 的类 我可以这样做吗 我尝试过的 a class abcd not class abcd dontapply define

  • 如何使用CSS缩放图像以填充div并保持纵横比？

    我想用一个 div 填充img 保持纵横比并根据需要拉伸宽度或高度以适应 div style width 80px height 80px img src div 我怎样才能实现它 如果图像不是二次方的 则必须将其 放大 并根据哪一侧较大而

  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so

  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show

  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa

  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec

  • 选择子元素但不选择孙元素

    我有以下简化的代码 div p text p div div p text p div div p text p div div p text p div 每当我设置一些值时 content pCSS 文件中的元素 更改也适用于 col1

  • Flexbox 项目的完美圆形边框半径[重复]

    这个问题在这里已经有答案了 我有类似这样的项目 它们是弹性盒容器内的弹性项目 我的正常尺寸物品 我的物品被挤压 我的 CSS 看起来像这样 body display flex flex direction column align item

随机推荐

  • 可以检测页面抓取吗？

    所以我刚刚创建了一个为我执行页面抓取的应用程序 并运行它 效果很好 我想知道是否有人能够弄清楚代码正在被页面抓取 无论他们是否为此目的编写了代码 我用java编写了代码 它几乎只是检查一行html代码 我想在向该程序添加更多代码之前我应该

  • CGContextClipToMask 返回空白图像

    我是石英新手 我有 2 个图像 一个背景和一个带有剪切形状的蒙版 我想将其放置在背景上以剪切出一部分 生成的图像应该是切口的形状 这是我的面具 中间的形状是 0 alpha 这是我的代码 UIView canvas sender super

  • 稍后发送电子邮件

    我想知道是否 v1 0 me sendMail具有延迟发送电子邮件的能力 在 Outlook 客户端中 您可以指定希望在稍后的日期和时间发送电子邮件 我四处探听 看看是否有一个属性可以在消息对象上设置来指示这一点 有人找到办法让它工作吗 当

  • iOS 在 UIWebView 表单输入中使用 UIKeyboardTypeDecimalPad

    我想用 显示小数点 在基于 cordova 的应用程序中本机应用程序使用的左上角 我见过很多使用私有 API 等的线程 但我想要一个可以用于应用程序商店提交的解决方案 任何帮助表示赞赏 我已经尝试过一些东西 this https stack

  • “范围错误：超出最大调用堆栈大小”为什么？

    如果我跑 Array apply null new Array 1000000 map Math random 在 Chrome 33 上 我得到 RangeError Maximum call stack size exceeded Wh

  • 如何在两个不同的核心数据模型之间共享实体

    我想知道如何在两个不同的核心数据模型之间共享实体 例如 我有一个 Universe 模型描述了 世界数据 以其 国家数据 另一方面 我有一个 人口 模型 它描述了 人类数据 以其 国家数据 我绝对希望将我的模型分开 提前致谢 你检查过了吗核

  • 在QML中动态创建ListModel

    当我需要在运行时创建任何 QML 组件时 我可以使用该指南 http qt project org doc qt 5 qtqml javascript dynamicobjectcreation html http qt project o

  • 输入字段值中的 HTML

    如何让 HTML 在输入字段的值中起作用 如果值中包含 HTML 它将显示为纯文本 有没有办法做这样的事情

  • 在 MATLAB 中嵌入 Python

    我正在尝试将 Python 2 6 嵌入到 MATLAB 7 12 中 我想嵌入一个用 C 编写的 mex 文件 这对于使用标量的小型简单示例来说效果很好 但是 如果以任何方式导入 Numpy 1 6 1 MATLAB 都会崩溃 我说无论如

  • Spring微服务端到端测试

    我想为使用 Spring Boot 构建的管道编写端到端测试 考虑两个微服务 A B 其中 B 消耗 A 的输出并生成 RESTful API 它们使用rabbitmq连接并依赖外部数据库 我想实现类似的目标 创建一个包含两个微服务的新项目

  • 如何从 RabbitMQ 获取旧消息？

    我使用 Bunny Ruby 发布 RabbitMQ 消息 如下所示 x publish Message n to s routing key gt mychannel 并像这样订阅 ch conn create channel x ch

  • Autofac - 构建前解决

    使用 Unity 可以在构建容器之前解决依赖关系 Autofac 也可以吗 下面的代码演示了我的场景 我需要解决ICacheRepository为了 更新 单例CacheHelper 在 Unity 中 这可以简单地完成container

  • 4 个浮动 DIV 在使用 CSS 的缩小屏幕上对称响应

    1 2 3 4 我有四个向左浮动的 DIV 上图 使用简单的 CSS float left 宽度 128 像素 高度 128 像素 当我缩小屏幕时 最后一个 DIV 正确跳到下一行 1 2 3 4 但我真正想要的是最后两个块跳到下一行 以保

  • 将数据集导出到 Excel 2007 EPPlus

    我正在尝试将数据集导出到 excel 2007 我无法使用用于在内容类型中使用 mime 类型导出的正常代码 如下所示 Response ContentType application ms excel 如果我对 xls 使用 mime 类

  • 将时间分成间隔

    我有三个输入 开始时间 End time 间隔时间 Example start time 01 00 end time 01 30 intervel time 10 min 我需要像 01 00 01 10 01 20 01 30 这样的输

  • 如何在单个查询中更改所有表前缀

    我对 mysql 非常业余 你能告诉我如何在单个查询中更改整个数据库的表前缀 我可以手动执行此操作 但更改所有表前缀非常耗时 请帮帮我 就像 isc administrator log 到 cus administrator log 意味着

  • 发出局部变量并为其赋值

    我正在初始化一个整数变量 如下所示 LocalBuilder a ilGen DeclareLocal typeof Int32 我如何访问它并为其赋值 我想做这样的事情 int a b a 5 b 6 return a b Use the

  • 在 Python 中进行自动属性分配的最佳方法是什么？这是一个好主意吗？

    而不是每次定义类时都编写这样的代码 class Foo object def init self a b c d e f g self a a self b b self c c self d d self e e self f f sel

  • php刷新当前页面？

    我有一个页面 如果设置了变量 在会话中 它会执行一个动作 然后它会取消会话 现在它必须自我更新 这就是我被困住的地方 有没有办法获取当前页面的确切 url 或者有一个函数可以做到这一点吗 so header location header

  • 使用 SVG 仅填充半颗星

    对于我正在构建的评级系统 有没有办法向这个 svg 示例添加一个 css 类 以便它只显示填充的一半星号 参见jsbin http jsbin com cifip 2 http jsbin com cifip 2 在此示例中 当前填充为黄色

热门标签