图标变成 SVG 圆圈

2023-12-12

如何将图标(例如 font-awesome)导出到 SVG 元素中?

我希望它位于圆的中心。

<svg class="svg" width=100 height=100>
    <circle cx=50 cy=50 r=25>
    </circle>    
    <i class="icon-check"></i>
</svg>

这是一个测试:http://jsfiddle.net/L2Lm3fgm/


只需找出 font-awesome 在其类中使用的字符代码,然后将该字符用作text节点。记得要分组circletext节点在一起。

Example:

svg { 
    margin: 24px auto;
    display: block;
}
circle {
    fill: transparent;
    stroke: #f00;
    stroke-width: 2;
}
svg text#chk {
    font-family: sans-serif;
    font-size: 24px; 
    fill: #00f;
}
<svg class="svg" width=100 height=100>
    <g>
        <circle cx=50 cy=50 r=25></circle>    
        <text id="chk" x=42 y=58>&#x2713;</text>
    </g>
</svg>

小提琴示例:http://jsfiddle.net/abhitalks/L2Lm3fgm/2/

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

图标变成 SVG 圆圈 的相关文章

  • 滚动/缩放 pixi.js 画布

    下面是在 pixi js 使用 WebGL 画布上放置一些文本的简单方法 我们如何滚动 缩放画布的显示部分 即鼠标按下 拖动应该移动 我想实现的示例 http s419743653 onlinehome fr things test2 ht
  • CSS 主体宽度未填充 100%

    我正在开发一个网页 我注意到这个问题 Please post anything you get in mind it will be very helpful 检查网站here http dev mariachi com br europe
  • 有什么解决方案可以删除 Firefox 上的清除按钮 吗?

    我尝试禁用隐藏清除按钮 但没有成功Firefox But on Chrome Edge Safari效果很好 知道为什么吗 有解决办法吗 以下是CSS input type time webkit clear button display
  • 嵌套在另一个内联块元素中的内联块元素具有 offsetTop

    我刚开始学习 HTML 现在我有一些代码 例如 div style height 300px width 500px font size 6 div style display inline block background pink wi
  • Jquery - Fancybox - 后台页面移位问题

    Fancybox 加载良好 所有内容都按照我想要的方式打开 但问题发生在后台 可以看到 并且令人不安 当盒子加载并返回到盒子上的正常位置时 我的整个页面向右移动了 8 个像素关闭 我无法链接到该网站 因为它位于我们公司防火墙后面的开发服务器
  • 禁用“未找到匹配项”文本并在 select2 上自动完成

    如何在 select2 Tagging 支持的自动完成功能上禁用 未找到匹配项 文本 这就是我现在所拥有的 ProductDescriptions 30 keywords select2 tags tokenSeparators minim
  • 数据表 - 为最后一列添加 colspan 时不起作用

    我在使用数据表时遇到问题 当我为最后一列添加 colspan 时 数据表插件不会应用于表 如果我删除最后一个列的 colspan 并将其放入任何其他列 它就可以工作 例如 table width 100 border 0 cellspaci
  • Selenium AttributeError:列表对象没有属性 find_element_by_xpath

    我正在尝试从网站上抓取一些营养数据 到目前为止一切似乎都进展顺利 直到我遇到格式略有不同的页面 使用 selenium 和这样的行 返回一个空列表 values browser find elements by class name siz
  • 如何制作可扩展的文本框?

    我想制作一本以给定宽度 高度开始的教科书 然后 如果用户输入的内容超过给定的空间量 文本框就会向下扩展 我该怎么做呢 我使用 CSS 吗 当用户超过允许的行数时 基本文本框仅显示滚动条 如何使文本框将行数再扩展 5 行
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 通过span标签动态包装js字符串,这可能会在React中危险地渲染

    我有一个字符串 我想使用 aria label 标签将 span 标签单独添加到字母表中 最终结果将在 React 中危险地呈现 请指教 这就是我所拥有的 const str D C B B const addAriaLabels str
  • 仅使用 CSS 更改颜色几秒钟

    是否可以在悬停 X 秒时更改 div 的颜色 然后仅使用 CSS 返回其原始颜色 我不希望颜色之间有任何淡入或淡出 例如 如果我想在悬停时将 div 的颜色更改为黄色 1 秒 则它必须保持黄色 1 秒 然后立即返回到原始颜色 This ht
  • 从谷歌加载 jquery 不起作用(对我来说)

    啊 我是个可怜的菜鸟 下面的 html 文档没有提醒任何人我的求助 有人知道为什么吗 这对我有用
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • 带有透明边框的响应式箭头进度条

    我正在尝试构建一个进度条 如结帐中常见的那样 问题是 箭头之间的边界是透明的 整个事情应该是反应灵敏 到目前为止我已经明白了 http codepen io MrBamblele pen rVBeoz http codepen io MrB
  • 使用 CSS 显示 div 内容后淡出

    我正在尝试在单击按钮时显示通知 单击按钮实际上会检查电子邮件验证 我知道要显示一个包含错误消息内容的 div 但是 我想淡出错误消息 比如说 5 秒后 我想用CSS来实现它 以下是我的尝试 它只是隐藏了一切 signup response
  • 客户端与服务器端图像压缩[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在研究用户可以上传图片的东西 图像大小不受限制 现在我有两个选择使用PHP 服务器端 压缩图像或使用
  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct
  • 如何使用Javascript统计通过ajax返回的
  • 的数量?
  • 我有一个 ajax 代码 它将列表项返回为 li one li li Two li 每次都会返回不同数量的 li 的 我想查一下数量 li li 它返回 如何使用 JavaScript 检查它 给你 returnedHTML find li
  • HTML5 中填充笔划的透明度

    我正在 HTML5 中开发一个涂鸦应用程序 我想做一种桶功能 这个想法是绘制一条路径 它将被关闭并用选定的颜色 描边的颜色 填充 它对于纯色效果很好 但如果我想要透明的描边和填充 我会遇到这个问题 所发生的情况是填充完成到笔划的中间 路径的

随机推荐

  • Laravel 8 - 外键约束的形成不正确

    我不知道出了什么问题 因为我对此很陌生 Product Model class Product extends Model use HasFactory public function store return this gt belong
  • Heroku —“很抱歉,出了点问题”

    嗨 我对 Heroku 还很陌生 我已经完成了我的应用程序的一部分 目前我在本地工作 但我想部署到 Heroku 当我打字时heroku logs我懂了 2012 07 30T16 36 27 00 00 app web 1 DEPRECA
  • 在 Firebase 中创建用户时出现错误

    所以我正在关注精明的应用程序教程以学习 Vue js 本教程使用 Firebase 和 Firestore 由于 Firestore 处于 Beta 阶段 正如教程所述 因此可能会发生变化 我认为这里可能就是这种情况 无论如何 我正在尝试注
  • 在 Sweave 中制作扁平化 pdf

    因此 我正在使用 Sweave 创建 pdf 其中包含一些带有大量点的图表 我可以很好地获取 pdf 但它似乎用大量图层创建了它 因此很难在 Acrobat 或 Reader 中打开该文件 当我这样做时 我确实可以看到文档上加载的点 有没有
  • Postgres 是否提供刷新缓冲区缓存的命令?

    你好 有时我需要做一些 SQL 调优任务 我通常在我的测试数据库上做这样的测试 当我执行一条sql语句后 我想刷新包含SQL的缓冲区缓存 语句和sql结果 就像Oracle中的命令 Alter system flash buffer cac
  • 如何添加和删除CSS类

    如何删除CSS默认类 这是我的div div 这是我的 css 类 messageContainer height 26px color FFFFFF BACKGROUND COLOR 6af VERTICAL ALIGN middle T
  • 身份管理/SSO 解决方案? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 您对基本的集中式身份管理 SSO 服务有何建议 它必须是开源的 具有可插入的身份管理器 例如 LDAP DB openID 等 并提供一系列适当的
  • 生成新的 Nestjs 模块会导致错误:无法执行命令

    我使用带有 M1 芯片的 MacOS monterey 作为操作系统 使用以下命令安装 NestJS cli sudo npm install g nestjs cli 使用创建新的 Nest 项目时nest new message一切正常
  • 使用 XSLT 合并相邻的兄弟节点

    我有一个问题让我头疼极了 请帮我 输入是 p class section section 1 p p class code some code p p class code following code p p class code fol
  • 如何在Javascript中深度复制(克隆)具有数组成员的对象?

    介绍 我有一个班级Persons包含一个数组Person和功能 function Persons this mItems Array of Objects Person Persons prototype calculateScores f
  • JavaScript 中未声明变量的用法

    如果我们尝试使用未声明但允许为其设置值的变量 为什么 JavaScript 会抛出引用错误 e g a 10 creates global variable a and sets value to 10 even though its un
  • 使用 Maven 运行多个类

    我有一个包含多个类的包 每个类都封装了一个可执行程序 即带有 main 方法 即 com myorg examples classA com myorg examples classB etc 所有类都属于同一个包 com myorg ex
  • 为什么通过泛型类型映射闭集不允许解析重复?

    In 这段 TypeScript 代码 也在下面重复 有一个映射类型 type DRYObjectModelMap PlanetaryBodyClass in keyof FieldNameWithValueMap ObjectModel
  • 如何将分隔的字符串转换为表格布局?

    我有一个包含值的字段 CM45024 CM45025 CM45026 我想使用子报告将其分成多个项目 我的 jrxml 来源是
  • 如何对元素进行排序并将它们存储在变量中,XSLT

    我想知道是否可以先对一些元素进行排序并将它们 已排序 存储在变量中 我需要引用它们认为 XSLT 这就是为什么我想将它们存储在变量中 我试图执行以下操作 但似乎不起作用
  • 在 rspec 功能测试中使用 Devise

    我编写了以下 rspec 功能测试规范 require rails helper RSpec describe Team management type feature do user sign in describe User creat
  • PyFPDF 内部链接

    内部链接应该如何做 我尝试从第 1 页链接到第 2 页 效果很好 但从一页到第二页是行不通的 怎么了 from fpdf import FPDF pdf FPDF pdf add page pdf set font Arial B 16 t
  • Java:在运行时将类添加到 Jar 存档中

    我想在运行时将一些编译的类 class 文件 添加到当前 Jar 文件中的目录 包 我怎样才能做到这一点 Thanks 这是无法完成的 要更新 Jar 文件 您需要创建一个新文件并用新文件覆盖旧文件 以下是有关如何执行此操作的示例 impo
  • 如何自动将Windows根证书导出到文件?

    在 Windows 机器上 我想创建一个 C 代码 将 Windows 根证书导出到 pem crt文件 就像 certmgr msc 工具允许我手动执行的操作一样 目前正在挖掘 Windows 的 cryptoAPI 文档 但没有找到任何
  • 图标变成 SVG 圆圈

    如何将图标 例如 font awesome 导出到 SVG 元素中 我希望它位于圆的中心