<!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. linux 硬盘分区与格式化挂载 （二）

    1. 文件系统的挂载与卸载(详见linux系统管理P406)1) 掌握挂载的定义:挂载指将一个设备(通常是存储设备)挂接到一个已存在的目录上.2) 掌握mount命令的功能:实现文件系统的挂载.3) ...

  2. SpringBoot使用AOP

    本文介绍SpringBoot中使用Spring AOP. 简介 AOP简介 AOP可能对于广大开发者耳熟能详,它是Aspect Oriented Programming的缩写,翻译成中文就是:面向切面 ...

  3. UVA 12108 Extraordinarily Tired Students

    思路: ①用结构体stu,属性有清醒时间,睡眠时间,开始处于的时间,状态(醒着还是睡着), 还有计数器. ②二维数组存表格. ③在确定接下来要进入的状态之后,就一次把表格里持续状态的数据都修改掉,比如 ...

  4. BZOJ.3653.谈笑风生(长链剖分/线段树合并/树状数组)

    BZOJ 洛谷 \(Description\) 给定一棵树,每次询问给定\(p,k\),求满足\(p,a\)都是\(b\)的祖先,且\(p,a\)距离不超过\(k\)的三元组\(p,a,b\)个数. ...

  5. Self-introduction 自我介绍

    Hello everybody,我是一名计算机科学与技术大二的新生,来自小平爷爷的故乡——广安.我之所以说自己是新生,一方面因为我大一下学期才从广播电视学转到计科,另一方面是因为我又进入了新一学年的学 ...

  6. PHP 入门学习教程及进阶(源于知乎网友的智慧)

    思过崖历程: 自学的动机.自学的技巧.自学的目标三个方面描述学习PHP的经历 一.自学的动机: 一定要有浓厚的兴趣,兴趣是最后的老师,可以在你迷茫的时候不断地支撑着你走下去. 自学不是为了工作,不是为 ...

  7. react-native-background-job——让你的react-native项目实现后台运行

    安排在您的应用处于后台时运行JavaScript的后台任务. 即使应用程序已关闭,任务也会运行,默认情况下,也会在重新启动后继续存在. 这个库依赖于React Native的HeadlessJS ,目 ...

  8. python字符串面试题：找出一个字符串中第一个字母和最后一个字符是第一次重复，中间没有重复且最长的子串

    1.给出任意一个字符串,打印一个最长子串字符串及其长度,如果有相同长度的子字符串,都要一起打印出来,该子字符串满足以下条件, 第一个字母和最后一个字符是第一次重复 这个子字符串的中间字母没有重复 这个 ...

  9. LinkedList源码分析和实例应用

    1. LinkedList介绍 LinkedList是继承于AbstractSequentialList抽象类,它也可以被当作堆栈.队列或者双端队列使用. LinkedList实现了Deque接口,即 ...

  10. Django REST framework 中的序列化器

    在此之前定义一个序列化工具:     views中的的代码 from rest_framework.viewsets import ModelViewSet from .models import B ...