css制作环形文本
css制作环形文本
在项目开发中,我们可能会遇到环形文本的需求,这个时候,怎样在代码以通俗易懂的前提下实现我们需要的效果呢?可能你会想到用一个一个的span元素计算出旋转的角度然后拼接起来,这个方案不仅非常麻烦,而且还给页面的DOM元素添加了很多不必要的臃肿的标记著作权归作者所有。你可能也会想到既然怕麻烦,不如就用图片吧,简单粗暴多好,可是这样的话后期如果要修改就需要修改原始图片,这不是我们想要的效果,那如何才能用css实现我们想到的效果呢,
我们可以通过一点内联SVG来很简单地完成。SVG本身就支持文本以任何路径显示,环形只不过是路径的一个特殊情况。我们来试一下!
SVG中文本按路径显示的基本方案是通过一个<textPath>
元素来包裹我们的文本,把它放到一个<text>
元素中。<textPath>
元素通过id
引用我们的路径中定义的<path>
元素。在内联SVG中的文本还继承了我们的字体样式(除了line-height
,因为这是SVG中默认的样式),所以我们不需要担心这个问题,就像我们引入一个外部的SVG图像一样。
可惜,
<textPath>
只可以存在于<path>
元素中,这就是我们为什么不可以使用可读性更好的<circle>
元素作为我们的路径圆的原因。
假设我们要把“circular reasoning works because”这句话做成环形文本,占据一个圆圈的整个圆周,如图所示。
html:
<div class="circular">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
<text>
<textPath xlink:href="#circle"> circular reasoning works because </textPath>
</text>
</svg>
</div>
css:
.circular{
width: 200px;
height: 200px;
margin: 100px;
}
.circular path { fill: none; }
.circular svg { display: block; overflow: visible; }
好了,基础的代码就是这些,这样就可以实现一个环形文本的效果了,如果项目中有多个地方需要用到环形文本,但是你也不想写那么多重复的html元素,这个时候你可以用一段js为容器(.circular)添加内部元素:
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
} $$('.circular').forEach(function(el) {
var NS = "http://www.w3.org/2000/svg"; var svg = document.createElementNS(NS, "svg");
svg.setAttribute("viewBox", "0 0 100 100"); var circle = document.createElementNS(NS, "path");
circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
circle.setAttribute("id", "circle"); var text = document.createElementNS(NS, "text");
var textPath = document.createElementNS(NS, "textPath");
textPath.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', '#circle');
textPath.textContent = el.textContent;
text.appendChild(textPath); svg.appendChild(circle);
svg.appendChild(text); el.textContent = '';
el.appendChild(svg);
});
页面中需要环形文本的地方加上容器就行:
<div class="circular">这里是环形文本这里是环形文本</div>
<div class="circular">这里是环形文本这里是环形文本2</div>
效果如下:
具体细节请参考:传送门
css制作环形文本的更多相关文章
- CSS制作环形进度条
参考来源 <Radial progress indicator using CSS>,该文核心是用纯CSS来做一个环形的进度条.纯css的意思就是连百分比这种数字,都是css生成的.文章作 ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 个人练习:使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- css特效 - 环形文字
记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...
随机推荐
- LeetCode2.两数相加 JavaScript
给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例: 输入:(2 -& ...
- iOS之报错“Cannot create __weak reference in file using manual reference counting”解决办法
解决的办法:在Build Settings--------->Aplle LLVM8.0 - Language - Objectibe-C------------->Weak Refere ...
- 使用poi读取excel文件 Cannot get a text value from a numeric cell
我这样转换得到一个excel文本域的值 Cell cell = row.getCell(c); cell.setCellType(Cell.CELL_TYPE_STRING); String park ...
- 并查集(union-find sets)
一.并查集及其优化 - 并查集:由若干不相交集合组成,是一种简单但是很好用的数据结构,拥有优越的时空复杂性,一般用于处理一些不相交集合的查询和合并问题. - 三种操作: 1.Make_Set(x) 初 ...
- Mit6.824 Lab1-MapReduce
前言 Mit6.824 是我在学习一些分布式系统方面的知识的时候偶然看到的,然后就开始尝试跟课.不得不说,国外的课程难度是真的大,一周的时间居然要学一门 Go 语言,然后还要读论文,进而做MapRed ...
- Python3 operator模块关联代替Python2 cmp() 函数
Python2 cmp() 函数 描述 cmp(x,y) 函数用于比较2个对象,如果 x < y 返回 -1, 如果 x == y 返回 0, 如果 x > y 返回 1. Python ...
- 为什么我用了$().height()还是对不齐呢?
有一个这样的需求:有两个显示内容的框,要使他们高度一致,因为他们存放的内容多少和结构不一样,左边内容少,右边内容多.这就导致了右边会比左边高,解决方法就是超出部分用滚轮显示,那这时就先要调整右边的高度 ...
- js-scroll判断页面是向上滚动还是向下滚动
原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...
- 如何解决thinkphp5中验证码常见问题?
对于thinkphp如何实现验证码,我这里就不介绍了.直接看之前的文章 http://www.cnblogs.com/qqblog/p/6639419.html.下面,我能想出来的是,我自己在开发过程 ...
- Python学习:3.Python学习基础
Python基础概念 一.编码 Python解释器加载.py文件中的代码的时候,对内容进行编码,在Python2.x中默认使用的是ASCII,因此我们使用Python2.x版本输出中文的时候,会出现以 ...