程序员经验分享-hwhale

如何在 SVG 中制作不同大小的内嵌文本？

2024-04-18

在 HTML 中为不同的单词创建具有不同字体大小的文本非常容易。但是关于<text>在 svg 中？

我认为这很好地解释了我的问题：https://jsfiddle.net/4atoctra/1/ https://jsfiddle.net/4atoctra/1/

一切都在下面：

<div>
This is a text, and you can have <span style="font-size:25px">big</span> and <span style="font-size:11px">small</span> sizes easily inline.
</div>

<div style="margin-top:50px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="360px" height="126px" viewBox="0 0 360 126">
<text><tspan x="150" text-anchor="middle" y="10" font-family="Tahoma" font-weight="bold" font-size="11" fill="#003863" xml:space="preserve">What about this in a &lt;svg&gt;?</tspan></text></svg>
</div>

您只需更改每个的字体大小即可tspan元素？

<svg viewBox="0 0 500 100" width="500px">
  <text x="0" y="50" font-size="20">It's not <tspan font-size="30">that hard</tspan><tspan font-size="40"> to change size?</tspan></text>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

SVG

如何在 SVG 中制作不同大小的内嵌文本？ 的相关文章

  • 在 SVG 中使用变换模拟枢轴旋转

    我在 SVG 中有一个矩形 需要从特定点绕轴旋转 我能想到的最好方法是变换到枢轴的 xy 旋转角度 然后再次变换 问题是第二个变换的 xy 我认为它会在某种程度上采用 cos 和 sin 只是不确定在哪里或为什么 会旋转 90度到 也许我以

  • 具有多个路径的 SVG 剪辑路径的悬停事件

    我有一个 SVG 演示图像 其中包含多个正在剪辑动画 GIF 的圆圈 当用户将鼠标悬停在每个圆圈上时 是否可以观察每个圆圈的悬停事件 例如左上角的圆圈或右中角的圆圈 另外 当这些圆圈悬停时 是否可以操纵这些圆圈上的颜色叠加 EDIT 理想情

  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var

  • 动画后 SVG 路径发生变化

    我正在画一个

  • Angular svg不同实例共享相同的defs

    我有一个角度组件 我在其中使用 def 更改电池 svg 状态填充

  • SVG 视图框显示屏幕外项目

    我正在使用 HTML5 制作游戏svg标签为图形提供多分辨率显示 游戏的大部分内容已经完成 但在测试中我刚刚遇到了一个主要错误 其中涉及 SVG 对象可见 尽管在非本机分辨率下位于视图框之外 我不确定这是否是我的代码或浏览器本身的缺陷 Go

  • 使 SVG 中的混合模式真正起作用吗？

    我曾多次做过以下事情

  • 黑白 PNG 转 SVG

    我有一个河流 土地掩码来区分土地与河流 湖泊 该文件的大小为 W 43 200x H 21 600 由于 RAM 立即填满 因此无法打开该文件 我已将文件分成 3600 3600 块 它们可以正常打开 然而 我试图在谷歌地图中绘制陆地上的文

  • Android Vector Drawable 不支持。如何修复它？

    尝试从 AndroidStudio 2 2 Ubuntu 14 04 的本地 svg 文件生成矢量资源时出现此错误 Could not generate a preview In icon svg ERROR line 6

  • 在 SVG 中绘制 DOM 对象时如何在 Canvas 中使用 Google 字体？

    根据 Mozilla 的文档 您可以在 Canvas 上绘制复杂的 HTML 例如this https developer mozilla org en US docs Web API Canvas API Drawing DOM obje

  • 使用 D3.js 解析时间序列数据

    是时候寻求帮助了 我已经学习 D3 js 几个星期了 我才开始觉得我理解了其中的 10 哈哈哈 我正在尝试生成一个非常简单的线图 只要数据非常简单 我就可以做到这一点 但我的原始数据源具有 UTC 时间戳和实数 小数 这会导致任何超出简单范

  • 如何逐步绘制矢量路径？ （拉斐尔.js）

    如何逐步动画化矢量路径 就像它被绘制一样 换句话说 慢慢地逐像素地显示路径 我在用着Rapha l js but如果您的答案不是特定于库的 例如可能有一些通用的编程模式可以完成此类事情 我对矢量动画相当陌生 欢迎 使用直线路径很容易做到 就

  • Qt 支持在 QIcon 中为 SVG 着色

    看来 Qt 不支持 SVG 中路径标签上的描边 填充选项

  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f

  • 在 Jade 模板中包含 SVG xml

    是否可以创建一个 Jade mixin 它从文件系统读取文件 并将其回显到渲染的 HTML 中 我试过这个 mixin svg file var fs require fs var xml fs readFileSync file div

  • 底部带有三角形的 div 和背景图像

    我想做一个div 有一个底部的三角形 但我需要三角形上的背景图像为了出现 我尝试使用伪元素 after 但它不起作用 homebg after content position absolute top 100 left 0 right 0

  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤？

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直

  • R 中 SVG 图形的最佳设备？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我想从 R 导出 SVG 图形 似乎有两种选择 RSvgDevice 和 Cairo 有人可以对这些包发表评论吗 是默认的还是明显比另一个

  • 在 d3.js 中操纵鼠标悬停在“点击区域”

    我想show and hideSVG 中的一个节点 当鼠标移到 mouseout 问题是我的节点内部的形状是一条宽度只有1 5px的路径 因此在鼠标悬停事件中不容易击中该区域 这对用户体验肯定不方便 我想知道是否有办法做到这一点打击范围更广

  • 如何在 SVG 元素上使用箭头标记？

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1

随机推荐

  • 多线程程序中的 std::string

    鉴于 1 C 03标准没有以任何方式解决线程的存在 2 C 03 标准将其留给实现来决定是否std string应该在其复制构造函数中使用 Copy on Write 语义 3 写时复制语义通常会导致多线程程序中不可预测的行为 我得出以下看

  • 为什么要使用Promise.resolve().then()？

    在阅读 Angular 指令的代码时路由器链路激活 https github com angular angular blob master packages router src directives router link active

  • 释放 GCD 调度队列属性的正确方法是什么？

    我正在使用一个dispatch queue 它是通过其所有者的属性访问的 如下所示 property nonatomic assign dispatch queue t queue 请注意assign关键词 队列在对象的整个生命周期中使用

  • 嵌套属性未以简单形式显示

    鉴于以下情况 Models class Location lt ActiveRecord Base has many games end class Game lt ActiveRecord Base validates presence

  • 如何获取 BTreeSet 中元素的下界和上限？

    正在阅读BTreeSet文档 我似乎无法弄清楚如何从 a 中获取大于元素的最小值或小于元素的最大值BTreeSet在对数时间内 我看到有一个range https doc rust lang org std collections stru

  • 将 Elmah 与 WebApi 结合使用时，错误会记录两次

    我正在尝试使用 elmah 记录我的 asp net web api 项目中的异常 我遇到的问题是每个错误都会记录两次 我正在使用 Elmah Contrib Web Api 我的应用程序类如下 public class WebApiApp

  • 用 R 计算年龄

    我在 R 中有两个数据帧 其中一个数据帧包含一个人的出生年份 YEAR 1931 1924 然后另一列显示最近的时间 RECENT 09 08 2005 11 08 2005 我想做的是减去年份 以便我可以计算他们的年龄 但我不知道如何处理

  • Rails respond_with：它是如何工作的？

    我到处读到关于它有多酷的内容respond with方法在 Rails 3 中 但我什至无法在 Rails API 中或通过搜索源代码找到对它的引用 任何人都可以向我解释它是如何工作的 您可以使用哪些选项等 或者向我指出它实际实现的位置 以

  • 在事务结束时发送事件

    我有一个服务对象的接口 如下所示 为简洁起见进行了简化 public interface ItemService public Item getItemById String itemId int version public void c

  • 部署到 Docker 时外部化 Spring Boot 属性

    在我的 Spring Boot 应用程序中 我想将属性外部化以在 Docker 容器中运行 首次部署时 当前的属性my server src main resources application yml由应用程序按预期加载和使用 一切正常

  • 如何修复这个已有 8 年历史的 VBA 64 位编译器错误？

    所以这就是错误 64 BitVBA主机 例如Access 365 64位或Excel 2016 64位 创建类模块SomeClass this needs to be here to trigger the bug Private Sub

  • Hashmap 单键保存一个类。计算密钥并检索计数器

    我正在开发一个数据库自我项目 我有一个来自以下位置的输入文件 http ir dcs gla ac uk resources test collections cran http ir dcs gla ac uk resources tes

  • 将数据表保存到文本文件的最短方法

    我刚刚找到了一些答案 但发现它们都非常长并且有很多迭代 所以我想出了自己的解决方案 将表转换为字符串 string myTableAsString String Join Environment NewLine myDataTable Ro

  • JavaScript 中的封装

    很久以前 我看到有人用如下代码封装了整个 JavaScript 块 function this 问题 上面的代码正确吗 像上面提到的那样封装整个 JavaScript 块有什么好处 对 那是正确的 它称为自调用匿名函数表达式 JavaScr

  • SQL Server DateTime 参数“舍入”警告

    与其说是问题 不如说是警告 今天早上我们解决了一个非常令人费解的错误 我们有各种报告 允许用户输入他们想要运行的日期范围 假设是 如果您要求提供 2010 年 8 月 1 日至 2010 年 8 月 10 日的报告 您的意思是include

  • android内容提供者总和查询

    是否可以使用getContentResolver query 当我想要的时候sum column OR 我是否必须对数据库句柄进行原始查询 当提供列数组时ContentResolver query 将列名称括起来sum 功能 String

  • 将python程序转换为windows可执行文件

    我正在尝试从具有 GUI 的 python 程序创建 Windows 可执行文件 我正在使用以下脚本 from distutils core import setup import py2exe setup console gui py 它

  • Typescript 阻止节点/模块工厂模式：错误 TS4060

    当使用 ES6 模块语法导出返回 Typescript 类实例的工厂函数时 会产生以下错误 错误 TS4060 导出函数的返回类型具有或正在使用私有名称 Paths 来自 paths ts Class scoped behind the e

  • Google Map API 通过邮政编码获取地址信息，但它通过街道号码响应结果

    我正在使用谷歌地图 API 通过世界各地的邮政编码获取地址信息 非特定国家 地区 我预计邮政编码是 610 但 google 响应结果是街道号码 610 有什么方法可以仅通过邮政编码获取地址吗 预先感谢各位的支持 与此查询一起进行的操作怎么

  • 如何在 SVG 中制作不同大小的内嵌文本？

    在 HTML 中为不同的单词创建具有不同字体大小的文本非常容易 但是关于

热门标签