<!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学习笔记 3 权限篇

    chmod 查看命令 ls -l -  rwx             r_x              r_x            4              user      grop    ...

  2. Intellij IDEA更改项目优先编译顺序

    今天启动公司项目突然发现了一个问题,类里面明明有这个方法,但是无论怎样都不编译.(由于公司项目是二次开发,代码都是第三方写的,代码请勿仔细看,怕伤了你的眼睛.) 如图,找不到setJGMC方法. 但是 ...

  3. webpack+vue+es6+postcss

    本篇文章仿照vue-cli生成的项目结构,自己重新搭建目录,写一个小demo进一步巩固单文件组件的知识,并且学习中间件.一.要解决的问题1.如果把webpack.config.js放进build文件夹 ...

  4. AGC 007D.Shik and Game(DP)

    题目链接 \(Description\) 数轴上有一个人,从\(0\)出发到\(E\),速度为\(1\).数轴上还有\(n\)只熊,每只熊会在经过后的\(T\)时刻后产生一个金币.给定\(E,T\)以 ...

  5. O(1) long long a*b%p

    inline ll muc(ll n,ll m){n%=p,m%=p;return (n*m-(ll)((long double)n*m/p)*p+p)%p;}

  6. Markdown 的离线编辑工具推荐:Sublime Text3 or Typora?我推荐Typora

    最新版Sublime Text3 通过插件的方式,可以完美支持Markdown文档的编写,但是,唯一不完美的是实时预览的缺陷.可能各位看官要喷了,谁说Sublime Text3 不能实时预览的?你看: ...

  7. fastjson 使用教程

    fastjson 是阿里的开源项目,具网上的说法 fastjson 的解析速度是 Gson 的6倍,体积小,而且开源. 项目地址: https://github.com/alibaba/fastjso ...

  8. 道路 [NOIP模拟]

    Description 我们看见了一个由 m 行 n 列的 1*1 的格子组成的矩阵,每个格子(I,j)有对应的高度 h[i][j]和初始的一个非负权值 v[i][j].我们可以随便选择一个格子作为起 ...

  9. 华容道 [NOIP 2013]

    Describltion 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面, 华容道是否根本就无法完成,如果能完成, 最少需要多少时间. 小 ...

  10. chrome浏览器下载内容存放位置

    点击: 或者直接快捷键 ctrl +J 打开下载的资料在[设置]中可将浏览器设置成默认浏览器,更换下载内容的存放位置:给一个提示,本人未曾修改下载的存放位置,是用户/Administrator/Dow ...