美文网首页
2019-07-19 svg文本

2019-07-19 svg文本

作者: DOGirl | 来源:发表于2019-07-19 22:25 被阅读0次
image.png
从评论中学到的,在自己的项目中也可以这么使用
image.png
image.png
image.png
明天应该将前三章复习下,还是用电脑学习效率高些,用手机看的基本都忘了,用电脑可以实际操作,同时通过简书将重要知识点还可以记录下,相当于笔记,再次看笔记比看视频会节省更多的时间。
image.png
image.png
dx,dy可以理解为数组,里面的位置就几个,就对应text或tspan中有多少标签
<text x="100" y="100" style="font-size:50px;font-family: Arial" dy="20,20,20,20,20">
<tspan fill="red">AB</tspan>
<tspan stroke="green" stroke-width="2" fill="none">EF</tspan>
</text>
x,y对应整个文本开始的坐标位置,dy和dx就是对应文本中每个字符的开始位置。
关于svg中的pattern和gradient这篇文章写得不错https://segmentfault.com/a/1190000009278935
image.png

Document.createElementNS()
创建一个具有指定的命名空间URI和限定名称的元素。

要创建一个元素而不指定命名空间URI,请使用 createElement 方法。

while(i--) {
x.push(10);
var tspan = document.createElementNS(NS,'tspan');
tspan.textContent = text[n - i -1];
sintext.appendChild(tspan);
var h=Math.round(360/26*i);
// h使用360/数字表示
// 注意这里要用百分比,这个hsl应该是定义颜色的
tspan.setAttribute('fill','hsl('+h+',100%,80%)');
}
可以实现一个彩虹桥,图片晚上补上。


image.png

相关文章

  • 2019-07-19 svg文本

    Document.createElementNS()创建一个具有指定的命名空间URI和限定名称的元素。 要创建一个...

  • SVG 滤镜

    SVG 滤镜用来向形状和文本添加特殊的效果。 在 SVG 中,可用的滤镜有: feBlend feColorMat...

  • SVG 滤镜

    本节我们学习 SVG 中滤镜,SVG 滤镜是滤镜中的一个类型,用来向形状和文本添加特殊的效果。 SVG的可用滤镜 ...

  • svg中文字显示及常用样式设置

    前言 svg标签主要用于绘制图表,难免需要显示一些文字。svg中自有的文本标签text text svg中文字标签...

  • Confluence技巧

    装完免费的 PlantUML 插件后启用 svg 功能,可以在页面插入可以复制文本的 svg 矢量图https:/...

  • H5-12.18SVG画图及高级应用

    一、SVG - 基础 1、 什么是SVG SVG的优势1)可通过文本编辑器来创建和修改2)可被搜索引擎搜索到3)S...

  • SVG text 自动换行算法

    最近做的项目涉及到 web 绘图,采用 d3 操作 svg 实现。图中通常会用到文本,而 svg 里的 text ...

  • svg组件封装

    svg图片的优点 1,任意放缩。 用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。2,文本独立。 SVG...

  • 一篇文章带你了解SVG 转换知识

    SVG 转换在SVG图像中创建的形状。例如,移动,缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。 一、转换简...

  • 一篇文章带你了解SVG 转换知识

    SVG 转换在SVG图像中创建的形状。例如,移动,缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。 一、转换简...

网友评论

      本文标题:2019-07-19 svg文本

      本文链接:https://www.haomeiwen.com/subject/uqselctx.html