可以将文本添加到 SVG 路径吗?

2023-11-27

是否可以将文本添加到 svg 路径,我创建了一个 svg 三角形,想在其中心添加一个字母,但不确定这是否可能?


是的。看SVG1.1 规范第 10.13 节(标题为“路径上的文本”)有关使用textPath元素。

总结:

  1. 给你的路径一个id属性。
  2. Create <textPath xlink:href="#pathid">My text here</textPath>

这是直接来自规范的示例:

SVG Image with text following the curve of the path with ID "MyPath"

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <desc>Example toap01 - simple text on a path</desc>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

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

可以将文本添加到 SVG 路径吗? 的相关文章

  • 如何延迟 NavLink 的反应?

    Delay e gt e preventDefault setTimeout gt e unpreventDefault make this work 500 render
  • 使用 jQuery 拖放

    我想使用 jQuery 进行简单的拖放操作 到目前为止我还没有做任何事情 但之前的尝试都没有成功 你有没有尝试过jQuery UI 可拖动 http jqueryui com demos draggable 简单用例 div class u
  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏
  • 在js中检测浏览器的最佳方法

    JavaScript 中有很多浏览器检测方法 据我所知 使用navigator userAgent或检测特征 例如XMLHttpRequest 等等 谁能告诉我哪种方法最好 最有效 如果你真的需要知道什么browser他们正在使用 你主要需
  • Hydrate with RTK Query 确实会抛出错误

    我有一个非常简单的组件来显示来自本地 API 的数据 使用 Nextjs API 路由制作 我使用 RTK 查询来获取数据 const api createApi reducerPath data baseQuery fetchBaseQu
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • 以编程方式触发 highchart 散点图上某个点的单击事件

    实际上 我有一个小要求 其中有一个带有点列表和下拉列表的散点图 当我从下拉列表中选择一个项目时 应触发其相应的数据点单击 当我在图表上选择一个数据点时 必须执行一些操作 并且下拉列表应根据选择进行更新 我们有什么办法可以做到这一点吗 我尝试
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • 使用 jQuery 解析无效的 HTML,而不添加到 DOM?

    我正在开发一个使用 HTML 模板的 jQuery 插件 最终用户可以传入一个最简单级别的模板 如下所示
  • apollo 客户端从存储中删除而不发生突变

    我需要通过 id 从本地存储中删除一条 记录 而不使用突变 因为服务器不支持突变 我尝试像这样手动访问商店 delete this apolloClient store getState apollo data 1112 这会删除记录 但是
  • 您网站上的自定义 jQuery 脚本有多少行代码?多少才算是太多呢?

    对于我们的网站 我使用了大量 jQuery 现在我正在查看基础库顶部的 340 行 jQuery 代码 多少是太多了 我将添加更多内容 我什么时候开始尝试压缩代码并最终转向 OOP 行数并不意味着什么 重要的是你实际上在做什么 您可能拥有
  • 使用jquery和coldfusion cffile上传多个文件

    不是一个真正的问题 只是想将其发布在某个地方 因为我在其他地方找不到它 现在我已经拼凑了一个工作演示 我想我会分享 这在 Coldfusion 和 Railo CFML 服务器上同样有 效 问题是 对于 CFML 开发人员来说 CFFILE
  • 在部分渲染时执行 JavaScript

    我有一些 JavaScript 代码 我想在用户单击其文件夹之一后执行 它会触发 show 操作和 show js erb 从而呈 现部分内容 Show js erb 当用户单击其文件夹之一时触发 如下所示 body append 它成功注
  • 如何修复带有单个道具的括号的 prettier 和 tslint 错误?

    我使用 prettier 和 tslint https github com alexjoverm tslint config prettier https github com alexjoverm tslint config prett
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 如何在 jQueryUI 工具提示中换行

    新版本的 jQueryUI 1 9 附带了本机工具提示小部件 经过测试 如果内容 标题属性的值 很短 它就可以正常工作 但如果内容很长 工具提示一旦显示就会与输入文本重叠 有a demo http jqueryui com tooltip
  • 在 Javascript 中创建数组

    我对 javascript 不太熟悉 并且在用 javascript 制作 2d 或者也许我可能需要 3d 数组时遇到了一些麻烦 我目前需要收集 2 条信息 一个 ID 和一个值 因此我创建了以下内容 var myArray var id
  • 将 javascript 变量作为参数传递给 @url.Action()

    是否可以将javascript变量作为参数传递给 url Action 因为据我所知可能存在服务器和客户端问题 我的要求是我必须根据过滤器下载文件 并进行ajax调用不适用于下载文件 所以我对 url Action 进行了编码 但无法实现这
  • 如何设置javascript对象数组中所有对象的特定属性值(lodash)

    我有以下对象数组 var arr id a1 guid sdfsfd value abc status active id a2 guid sdfsfd value def status inactive id a2 guid sdfsfd
  • 开玩笑 setTimeout 不暂停测试

    it has working hooks async gt setTimeout gt console log Why don t I run expect true toBe true 15000 我已经查看了这个答案 Jest 文档和几

随机推荐

  • Robolectric 与 Android Studio 1.1.0 配合使用时出现的清单和设置问题

    我正在尝试进行 Robolectric 测试并在我们当前的项目中工作 但运气不佳 我的偏好是让它们在 Android Studio 1 1 0 中运行 这是我的项目结构 这是我的测试 import android widget Button
  • 如何使用XMPP框架发送消息

    我正在 iPhone 中使用 XMPP 框架创建一个聊天应用程序 我可以收到消息 但无法发送消息 任何人都可以给我解决这个问题吗 void sendMessage NSString msgContent NSString messageSt
  • Android 应用内结算:您请求的项目无法购买。不同谷歌帐户不一致

    请不要在未阅读所有内容的情况下将其作为重复项关闭 案例摘要 使用相同的应用程序构建 使用两个 Google 测试帐户进行 IAP 交易 一种有效 一种无效 两个谷歌帐户都有可用的信用卡 并且可以从其他应用程序购买IAP 更多细节 我们向测试
  • 在linux中使用mono获取MAC地址

    如何在 Linux 上的 Mono 应用程序中获取计算机的 MAC 地址 借自MSDN 在VS2008和mono 2 4 2 3 Debian 2 4 2 3 dfsg 2 上测试 using System using System Net
  • 访问任意深度的嵌套哈希值的最红宝石方式是什么? [复制]

    这个问题在这里已经有答案了 给定一个哈希值 例如 AppConfig service gt key gt abcdefg secret gt secret abcdefg other gt service gt key gt cred ab
  • 如何将 JSON 数据放入 html / javascript 网格表中

    我有以下 JSON 格式的数据 ID 00 50 c2 63 10 1a start 1349773838277760 end 1349773838277770 startArea areaStart endArea areaEnd dur
  • 如何在 Python 中将向量投影到由其正交向量定义的平面上?

    我有一架飞机 plane A 由其正交向量定义 例如 a b c 即向量 a b c 正交于plane A 我想投影一个向量 d e f onto plane A 我怎样才能用Python做到这一点 我想一定有一些简单的方法 Take d
  • 如何访问jar文件中的资源(Excel文件)

    您好 我已将 java 项目导出为可执行 jar 文件 在我的项目中 我正在访问一个包含一些数据的 Excel 文件 现在 当我尝试访问 Excel 文件时 无法访问该文件 我的项目结构是 Java 项目 文件夹 src 文件夹 resou
  • 如何在Flutter中使用MediaQuery设置文本的scaleFactor?

    通过 MediaQuery 我可以获得 Samsung S7 Edge 屏幕尺寸的高度和宽度 以便我可以使用它 但是如何使用MediaQuery在ListTile中布局多列动态文本呢 在我的演示项目中 我将文本大小设置为 12 在 Sams
  • Android - 如何使图标在触摸时发光?

    如何在图标上获得蓝色发光效果 有什么快速的方法吗 我真的不想用photoshop来实现这种效果 任何帮助将非常感激 如果您想以编程方式生成发光 可以按以下方法操作 我的建议是 在活 动开始时只生成一次 然后使用它创建一个 StateList
  • 即使没有内存不足,我也会遇到 java.lang.OutOfMemoryError 吗?

    我正在读书揭开 java lang Outofmemory 错误的面纱我想知道我是否理解正确 如果 Java VM 抛出异常 这是真的吗 java lang OutOfMemoryError 请求的数组大小超出VM限制 这意味着VM拒绝创建
  • 使用 Powershell 更改 IIS6 站点主目录

    我正在尝试使用 powershell 更改站点的主目录 这是我到目前为止所拥有的 但它没有保存更改 server localhost siteName mysite iis ADSI IIS server W3SVC site iis ps
  • Pandas GroupBy 借助 CSV 中的大型数据集

    一个常见的 SQLism 是 从 A 的表组中选择 A 平均值 X 我想在 pandas 中复制它 假设数据存储在 CSV 文件之类的文件中 并且太大而无法加载到内存中 如果 CSV 可以容纳在内存中 那么简单的两行代码就足够了 data
  • JSF CommandButton onclick不调用Javascript函数

    我正在使用 JSF 的命令按钮 我不知道为什么我无法调用我的 javascript 函数 当我单击按钮时 不会显示任何警报
  • 将 Hibernate 查询结果检索为结果集而不是列表

    嘿呀 我是冬眠新手 我不得不说它确实简化了 SQL 查询的一切 然而 操作返回的结果目前对我来说是一个头疼的问题 结果以列表形式返回 大多数时候 我真的希望结果位于结果集中 以便我可以更轻松地操作它 因为使用结果集 您可以通过列名或索引指定
  • 为什么 std::uniform_int_distribution::operator() 不是 const?

    据我了解 当用于提取随机数时 分布不应改变 例如 对于均匀分布 当我们使用它生成随机数时 它的最小值 最大值不应该改变 那么为什么操作员 不是const吗 While min and max 不会改变 分布可能包含帮助它生成下一个值的状态
  • Symfony2 Doctrine - PostgreSQL 的 ILIKE 子句?

    我目前正在使用 symfony2 doctrine 2 3 和 PostgreSQL 9 我已经搜索了几个小时 看看我到底该怎么做ILIKE选择与QueryBuilder 看来他们只有LIKE 但在我的情况下 我正在搜索不区分大小写的 到底
  • 在网页上显示每秒更新的txt文件

    我有点像在黑暗中拍摄 我不知道如何做到这一点 所以一些有用教程的指针和 或链接会很棒 我有一个网站 我想显示文本文件 服务器日志 可能是嵌入的 问题是 只要服务器中发生事件 通常快于半秒 该文件就会更新 我怎样才能使网页实时显示文件 即显示
  • Vim 语法高亮显示 Python 的“else:”

    我对 Vim 中默认的 python 语法高亮感到恼火 它没有突出显示else 陈述正确 Vim 仅在 else 语句之间有一些空格时才会突出显示 else 语句else和冒号 so else 有效 但是else 才不是 它一定很容易修复
  • 可以将文本添加到 SVG 路径吗?

    是否可以将文本添加到 svg 路径 我创建了一个 svg 三角形 想在其中心添加一个字母 但不确定这是否可能 是的 看SVG1 1 规范第 10 13 节 标题为 路径上的文本 有关使用textPath元素 总结 给你的路径一个id属性 C