<!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创建对象两种方式的更多相关文章

  1. 在javaScript中把非数值类型的数据自动转换为数值类型的两种方式

    一.使用Number()函数. 二.使用parseInt()/parseFloat()函数. 详情: 一.使用Number()函数将非数值类型的数据自动的转化为数组类型 Number()函数可以将任何 ...

  2. selenium中webdriver跳转新页面后定位置新页面的两种方式

    刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素 一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...

  3. 简单说 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...

  4. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...

  5. java中设置代理的两种方式

    1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式. ...

  6. linux内核分析作业4：使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...

  7. 【java并发】传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  8. java中实现同步的两种方式:syschronized和lock的区别和联系

    Lock是java.util.concurrent.locks包下的接口,Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题,我 ...

  9. Java中HashMap遍历的两种方式

    Java中HashMap遍历的两种方式 转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: ...

随机推荐

  1. Oracle no TOP, how to get top from order

    On ROWNUM and Limiting Results Our technologist explains how ROWNUM works and how to make it work fo ...

  2. antd + node.js + mongoose小总结

    最近开发太忙,都没时间更新博客,想通过这篇博客总结一下相关经验,以备后续能用到: 一.antd 1.onChange of undefined问题:可能是页面中表单取了相同的名称,也可能是在遍历时表单 ...

  3. Django模板语言的复用

    一.include标签 由于在项目中,往往会出现多个页面拥有一个或几个相同的页面版块,或是一个页面多个页面版块是相同的,基于这个问题,我们可以采用模板语言复用include标签来帮我们解决,这样就避免 ...

  4. BZOJ.2653.[国家集训队]middle(可持久化线段树 二分)

    BZOJ 洛谷 求中位数除了\(sort\)还有什么方法?二分一个数\(x\),把\(<x\)的数全设成\(-1\),\(\geq x\)的数设成\(1\),判断序列和是否非负. 对于询问\(( ...

  5. Python3基础-代码阅读系列—素数

    生成素数代码展示 质数(prime number)又称素数,有无限个. 质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数. primenumber = [] upperlimit = 2 ...

  6. SpringMVC url匹配却404，SimpleUrlHandlerMapping不起作用

    代码如下: <mvc:default-servlet-handler/> <bean class="org.springframework.web.servlet.hand ...

  7. DOCKER上安装HASSIO

    更新源列表命令 sudo apt-get update sudo apt-get upgrade –y This is the list of packages you need to have av ...

  8. BZOJ4912 : [Sdoi2017]天才黑客

    建立新图,原图中每条边在新图中是点,点权为$w_i$,边权为两个字符串的LCP. 对字典树进行DFS,将每个点周围一圈边对应的字符串按DFS序从小到大排序. 根据后缀数组利用height数组求LCP的 ...

  9. 更换本地Git全局账户命令

    git config --global user.name gstok git config --global user.email @qq.com

  10. [jzoj]1729.blockenemy

    Link https://jzoj.net/senior/#main/show/1729 Description 你在玩电子游戏的时候遇到了麻烦...... 你玩的游戏是在一个虚拟的城市里进行,这个城 ...