svg中实现文字随曲线走向,HTML直接写和JavaScript创建对象两种方式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="//cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script> </head> <body style="padding:0px">
<form id="form1" runat="server"> <svg id="svgMain" viewBox="0 0 1000 300"
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> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
Show outline of the viewport using 'rect' element
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" />
</svg>
<script>
var _svgNameSpace = "http://www.w3.org/2000/svg";
var _XLINK = "http://www.w3.org/1999/xlink"; var t = document.createElementNS(_svgNameSpace, "text");
var textPath = document.createElementNS(_svgNameSpace, "textPath");
textPath.setAttributeNS(_XLINK, "href", "#MyPath");
//textPath.setAttribute("xlink:href", "#" + pathID);
textPath.textContent = " We1 go1 up1, then1 we1 go1 down1, then1 up1 again1"; t.setAttribute("fill", "#444"); t.setAttribute("style", "font-size:12px;");
t.appendChild(textPath);
document.getElementById("svgMain").appendChild(t); </script> </form>
</body>
svg中实现文字随曲线走向,HTML直接写和JavaScript创建对象两种方式的更多相关文章
- 在javaScript中把非数值类型的数据自动转换为数值类型的两种方式
一.使用Number()函数. 二.使用parseInt()/parseFloat()函数. 详情: 一.使用Number()函数将非数值类型的数据自动的转化为数组类型 Number()函数可以将任何 ...
- selenium中webdriver跳转新页面后定位置新页面的两种方式
刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素 一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...
- 简单说 通过CSS实现 文字渐变色 的两种方式
说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
- java中设置代理的两种方式
1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式. ...
- linux内核分析作业4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...
- 【java并发】传统线程技术中创建线程的两种方式
传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...
- java中实现同步的两种方式:syschronized和lock的区别和联系
Lock是java.util.concurrent.locks包下的接口,Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题,我 ...
- Java中HashMap遍历的两种方式
Java中HashMap遍历的两种方式 转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: ...
随机推荐
- pyspider 启动错误
[root@localhost python]# pyspider all [W 180629 07:08:26 run:413] phantomjs not found, continue runn ...
- SQL Server中变量的声明和使用方法
网址:http://blog.sina.com.cn/s/blog_63d0c97a0100qpy7.html 声明局部变量语法: DECLARE @variable_name DataType 其中 ...
- java 实验 三 (2)(3)
(2)编写一个Java程序,声明一个数组,各元素如:{12, 23, 456, 222, 768, 93245}计算出所有元素的和以及所有元素的平均值:SumArray.java(3)编写一个Java ...
- 关于ajax请求后js绑定事件失效问题解决方法
<script> $(function(){ $(document).on('click', '.add' ,function(){ window.location.href=" ...
- win7生成ssh key配置到gitlab
测试服务上使用ip访问gitlab,比如http://192.168.0.2/,创建用户并登陆后创建一个项目,比如git@gitlab.demo.com:demo/helloworld.git 如果想 ...
- Dead Fraction [POJ1930]
题意: 很有意思的一道题,,将一个无限循环小数转化成分母最小的精确分数值....,循环的部分不一定是最后一位. Sample Input 0.2... 0.20... 0.474612399... 0 ...
- web中icon 图标问题
每个页面都会引入 icon 小图标,下面说下它的用法 一.icon使用 icon的引入方式,与css外部引入方式类似,需要在头部引入, 即: <link rel="shortcut i ...
- java代码发送邮箱验证码与qq邮箱smtp服务
发送邮箱的类封装,在此之前需要一个jar包 javax.mail.jar 下载链接https://github.com/javaee/javamail/releases/download/JAVAM ...
- C#_02.13_基础四_.NET方法
C#_02.13_基础四_.NET方法 一.方法概述: 方法是一块具有名称的代码.可以通过方法进行调用而在别的地方执行,也可以把数据传入方法并接受数据输出. 二.方法的结构: 方法头 AND 方法 ...
- openstack 之~keystone基础
第一:keystone是什么? keystone是 OpenStack Identity Service 的项目名称,是一个负责身份管理验证.服务规则管理和服务令牌功能.它实现了openstack的i ...