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 第一种: ...
随机推荐
- Fruit HDU - 2152 -上下界生成函数
HDU - 2152 思路 :有上下界的生成函数 .生成函数即母函数,是组合数学中尤其是计数方面的一个重要理论和工具.生成函数有普通型生成函数和指数型生成函数两种, 其中普通型用的比较多.形式上说,普 ...
- 大数据环境完全分布式搭建 hadoop2.4.1
(如果想要安装视频及相关软件可以博私聊我 qq 731487514) hadoop2.0已经发布了稳定版本了,增加了很多特性,比如HDFS HA.YARN等.最新的hadoop-2.4.1又增加了YA ...
- JavaScript中本地对象、内置对象和宿主对象(转)
首先解释下宿主环境:一般宿主环境由外壳程序创建与维护,只要能提供js引擎执行的环境都可称之为外壳程序.如:web浏览器,一些桌面应用系统等.即由web浏览器或是这些桌面应用系统早就的环境即宿主环境. ...
- python正则表达式(二)
表示字符 示例1: . #coding=utf-8 import re ret = re.match(".","a") ret.group() ret = re ...
- Yii2 数组助手类arrayHelper
数组助手类 ArrayHelper 1.什么是数组助手类 Yii 数组助手类提供了额外的静态方法,让你更高效的处理数组. a.获取值(getValue) class User { public $na ...
- Java 多线程 同步和异步
同步和异步通常用来描述一次方法调用.一旦开始调用同步方法,调用者必须等到方法调用返回后,才能执行后续操作.一旦开始调用异步方法,方法调用会立即返回,调用者可以执行后续操作.异步方法会在另外一个线程中真 ...
- numpy快速入门
numpy快速入门 numpy是python的科学计算的核心库,很多更高层次的库都基于numpy.博主不太喜欢重量级的MATLAB,于是用numpy进行科学计算成为了不二选择. 本文主要参考Scipy ...
- 初次接触Jenkins遇到的几个问题
1,Jenkins一直显示pending-Waiting for next available executor 网上已经提到的原因 1>,磁盘满了 2>,节点管理 刷新状态 我遇到的情况 ...
- quepy
A python framework to transform natural language questions to queries in a database query language. ...
- Java第一章
第一章 计算机程序:计算机为完成某些功能产生的一系列有序指令集合. Java技术包括:JavaSE(标准版) JavaEE(企业版) ---JavaME(移动版) 开发Java程序步骤:1.编写 2 ...