【创新实训个人记录】6周-SVG文本样式设计与实现

已于 2022-05-26 15:05:53 修改
阅读量237 收藏 1
点赞数
分类专栏： LewzenCore-Text 文章标签： javascript html css
于 2022-05-19 20:17:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Minori_wen/article/details/124870644
版权
本文记录了一项关于SVG文本样式的6周实训，包括填充和线条样式、文本样式的详细设计，以及如何利用MathJax、dvisvgm和latexpp将LaTeX公式转化为SVG。在实现过程中，遇到了如何实现所见即所得编辑及提高公式转化效率的问题。
摘要由CSDN通过智能技术生成

详细设计

样式

对如何实现SVG文本的不同样式进行设计。

通过 标签内属性实现

填充&线条样式

将字符视为封闭图形

  • 填充样式—封闭图形内部

    • fill 文字颜色fill=""
    • fill opacity 文字透明度
    • fill rule 不作考虑

  • 线条样式—封闭图形线条

    可以不作考虑

    • stroke 线条颜色 stroke="blue"
    • stroke width 线条宽度 stroke-width=""
    • 其余不作考虑

文本样式

  • 字体 font-family=""
  • 大小 font-size="50"
  • 字体颜色 fill=""
  • 背景颜色
  • 对齐方式
  • 特殊样式
    • 粗体 font-weight=""
    • 斜体 font-style="oblique"
    • 下划线 text-decoration="underline"
    • 删除线 text-decoration="line-through"
      • <
最低0.47元/天 解锁文章
lzh.M
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
服务端Latex解析成图片或者HTML或者SVG方案
weixin_30666943的博客
06-05 662
Latex公式表达式在服务端进行转换成可用数据 使用语言与扩展 node.js Mathjax (文档链接) MathJax在nodejs上解决方案mathjax/MathJax-node（GitHub） 转换成图片或者SVG扩展pkra/mathjax-node-svg2png 准备工作 安装nodejs 安装Mathjax-node扩展 （GitHub） 安...
svg文本＜text＞详解
lweiyue的专栏
07-14 1万+
在SVG中，text的基本用法如下： 其效果如下图所示： 注意上图中红点的位置坐标即为(20,20)。可以看到，默认情况下，text使用以下默认属性：可以对文字的颜色、字体、字体大小、是否粗体、是否有下划线、是否斜体等进行设置。需要注意的是，样式基本与html相同，除了color，svg中使用fill进行颜色设置。 其效果如下图所示：水平对齐的方式有三种，分别是左对齐、居中对齐、右对齐。其设置的属性是text-anchor，对应的值分别是start、middle、end。默认值是start。居中对齐...
学习SVG（八）文本
小小的前端
07-21 4564
在SVG中除了绘图外，还可以添加文本。需要使用 元素在画布中创建文本，使用元素进行多行文本创建，使用 让文本在指定的路径上排列。
vue2.0+ueditorplus中使用mathjax识别粘贴内容中的latex数学公式并转为svg图片显示
最新发布
qq_26631337的博客
03-22 766
Mathjax使用的话，我看网上大部分都是2.0的一些配置和用法，而3.0中很多方法都被新方法替代了，过程中大家得多注意下新版本的变化。
字体，文字，文本
qq_42238554的博客
04-24 1188
字体 @font-face 设置字体。 实例： <style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } h1 { font-family:myFirstFont; } </style&...
如何使用vite-svg-loader
02-23
"使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器...
react-native-qrcode-svg：基于react-native-svg和node-qrcode的React Native QR码生成器
02-05
讨论： ： 产品特点轻松渲染QR码图像（可选）嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
angular-svg-icon：内联SVG的角度组件，允许使用CSS轻松设置样式
02-01
angular-svg-icon是Angular 11服务和组件，它提供了一种内联SVG文件的方法，从而可以通过CSS和代码轻松地对其进行样式设置。 该服务提供了一个注册图标，可加载和缓存由其URL索引的SVG。 该组件负责显示SVG。 从...
google-font-to-svg-path:从 Google 字体创建 SVG 路径
08-03
3. **自定义样式**：SVG路径可以与CSS结合，允许开发者应用各种动画效果和变形，为字体增添动态和交互性。 4. **跨浏览器兼容**：SVG是一种成熟的、广泛支持的标准，这意味着SVG路径在大多数现代浏览器中都能正常...
nuxt-svg-loader:SVG作为组件，也在服务器端！
05-13
Nuxt SVG加载程序-SVG作为组件，也在服务器端！ 特征完全支持SVG作为组件。 像Vue SFC一样导入它们使用Vue绑定，就像处理普通组件一样建立在之上Nuxt 2（仅Nuxt 2）支持经过全面测试！演示版可以通过获得现场演示。...
基于SVG的超链接鼠标悬停下划线动画特效
12-12
Underliner是一款基于SVG的超链接鼠标悬停下划线动画特效。Underliner插件可以在鼠标hover或悬停在指定的超链接元素上面时，以动画的方式显示预定义的SVG元素。
css3+html5 svg鼠标悬停文字链接下划线动画特效
04-06
这是一个基于css3+html5 svg制作的鼠标悬停文字链接下划线动画特效，这里有3种下划线效果，都很好看。 css html5
使用svg画虚线
qq_42727641的博客
11-17 7463
最近做项目遇到了画虚线的问题，而且不是简单的border就能解决的。查阅了资料选择使用svg的line标签来实现。 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="" y1="" x2="" y2="" stroke-dasharray="3 2" stroke="#cbe6a3"/> </svg> 要注意line的起始位置的坐标轴是相对于整个svg来说的，个人理解svg相当于整个画
SVG的字体操作
编程资料大全
11-17 329
SVG中，文字的(0,0)坐标在左下角，与Flex中的左上角要区分开。 另外，svg中，先transform，再以原点为基准scale。 取点法：从文字中取一个点，与原点连线，然后进行各种操作。 ...
HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
weixin_39599372的博客
06-03 328
在Web中给文本添加下划线常常出现在链接的文本上，早期一般使用text-decoration属性给文本添加下划线、删除线等。除了text-decoration之外，CSS还有很多技术方案可以给文本添加下划线效果，比如border-bottom、box-shadow、background-image等。对于Web开发者而言，更庆幸的是，CSS还有更多的，更灵活的特性实现文本下划线的效果。在这篇文章中...
解决文字和text-decoration:underline下划线重叠问题
aiyishengyishi的专栏
12-20 4429
解决文字和text-decoration：underline下划线重叠问题 1.border-bottom 2.box-shadow 3.background-image 4.text-decoration-skip指定覆盖关系 5.svg和canvas
7种实现下划线的方法
Wangdanting123的博客
12-04 1万+
7种实现下划线的方法
svg中text标签字体、颜色、样式、大小、居中、旋转、垂直、text长度、tspan、textPath详解
热门推荐
weixin_40779234的博客
02-22 2万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
wap svg 第八章 文字text--上拿-理疗-脚底安磨
家门口种果树，不怕馋
08-02 1万+
虽然它可能是真实的，每一个画面讲述了一个故事，这是完全正确的，用言语来帮助讲故事。因此，SVG有几个元素，让你将文本添加到您的图形。 文本术语Text Terminology 在我们调查的主要方法添加文本，的<TEXT>元素之前，我们应该定义一些术语，你会看到，如果你读了SVG规范，或者如果你的工作与文字在任何图形环境： 字符 一个字符，作为一个XML文档而言，是一个数...
记录插件vite-plugin-svg-icons的安装与使用
09-06
要安装和使用vite-plugin-svg-icons插件，您需要按照以下步骤操作： 1. 打开终端，并确保您的项目已经初始化，并且已经安装了Node.js（版本大于等于12.0.0）和包管理工具（如Yarn或NPM）。 2. 在终端中运行以下命令来安装vite-plugin-svg-icons插件和fast-glob依赖： ``` npm install vite-plugin-svg-icons fast-glob --save-dev ``` 或者使用Yarn： ``` yarn add vite-plugin-svg-icons fast-glob -D ``` 3. 在您的vite.config.ts（或vite.config.js）文件中，导入vite-plugin-svg-icons插件： ```typescript import viteSvgIcons from 'vite-plugin-svg-icons' ``` 4. 在plugins配置项中添加viteSvgIcons插件： ```typescript export default { // ...其他配置项 plugins: [ viteSvgIcons() ] } ``` 5. 现在，您可以在需要使用svg图标的组件中使用它们了。例如，在您的页面模板中： ```html <template> <svg-icon :name="nameVal" color="blue" class-name="menu-svg-icon" :icon-title="iconTitle" ></svg-icon> </template> ``` 6. 您还可以在脚本中设置和使用其他变量，例如： ```javascript <script setup> import { ref } from 'vue' let iconTitle = ref('svg图片') let nameVal = ref('layer') </script> ``` 7. 最后，您可以根据需要在样式表中自定义图标的样式： ```html <style scoped> .menu-svg-icon { width: 180px; height: 180px; color: red !important; } </style> ``` 请注意，这只是vite-plugin-svg-icons插件的基本安装和使用方式。您还可以根据具体需求进行更多的配置和定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值