js创建svg元素的方法
需要JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
<link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1">
<script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script>
<script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script>
<title>svg</title>
<style>
body, html {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<svg width="400" height="300" viewBox="0 0 400 300">
<path id="textPath" d="M10,10 L40,60 L20,80 L60,90 L70,20 Z" stroke="red" fill="none"></path>
<text stroke="red" fill="green" font-size="30" font-family="Microsoft YaHei"></text>
</svg>
<script>
;$(function() {
//创建圆
var $circle = createSvg('circle', {
'cx': '50',
'cy': '50',
'r': '20',
}).appendTo('svg');
//创建文本路径
var $textPath = createSvg('textPath', {
'xlink:href': '#textPath',
}).text('123456').appendTo('text');
//创建svg相关元素
function createSvg(tag, attr) {
if(!document.createElementNS) return;//防止IE8报错
var $svg = $(document.createElementNS('http://www.w3.org/2000/svg', tag));
for(var key in attr) {
switch(key) {
case 'xlink:href'://文本路径添加属性特有
$svg[0].setAttributeNS('http://www.w3.org/1999/xlink', key, attr[key]);
break;
default:
$svg.attr(key, attr[key]);
}
}
return $svg;
};
});
</script>
</body>
</html>
js创建svg元素的方法的更多相关文章
- JS动态创建SVG元素并绑定事件
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...
- 创建HTML元素的方法
第一种:使用 parent.appendchild()方法 HTML页面 <div id="div1"></div> JS文件 //第一步创建标签元素节点 ...
- JS选取DOM元素的方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...
- js 中移动元素的方法
2017-12-13 19:59:24 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- JS创建SVG的问题
在线编辑的一个东西,用的是js+svg,遇到了这样一个问题,就是说我监听页面的单击事件,然后记录下来鼠标单击的位置,给svg添加子标签,然后页面上展示出来 说的可能不大清楚,上代码吧 <!DOC ...
- js 创建html元素 渲染html元素
var p1 = document.getElementById('p1'); //添加的元素类型及属性var newNode = document.createElement("input ...
- JS创建 trim（） 方法，此方法在IE7、IE8中不存在 需要自定义
function trim(str){ //创建空格对象 var space = new String(" "); /* str = trimLeft(str,space); st ...
- JS 去除重复元素的方法
Array.prototype.del = function () { var a = {}, c = [], l = this.length; ; i < l; i++) { var b = ...
- js 创建xml元素
function createXML(pathData) { var xmlDOM = createXMLDOM(); //参考:http://iceworldvip.blog.51cto.com/5 ...
随机推荐
- 0809NOIP模拟测试赛后总结
终于有点脸单独建一个随笔写一下考试总结了…… T1一眼组合数学,推了一会儿式子发现恐怕是容斥.突然害怕,于是开始大力dp. 然后骗了70分走人hhh. T2挂了……又读错题了……以为必须相邻,然后就原 ...
- mybatis结果封装到hashmap中没有null的数据
1.在ssm框架中 在mybatis-config.xml配置文件中加下面这句代码即可解决 <setting name="callSettersOnNulls" value= ...
- 反编译之dex2jar工具
1.下载地址https://sourceforge.net/projects/dex2jar/files/?source=navbar bat是Windows系统使用,sh是mac系统使用!
- Thrift（PHP）入门无错篇章（一）
一.安装篇 博主注:截至2017-10-10,官网上thrift最新版0.10.0一直无法成功编译.所以,请选择0.9.3版本,避免走各种弯路: wget http://apache.fayea.co ...
- JS对象迭代v-for
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- PAT甲级——A1006 Sign In and Sign Out
At the beginning of every day, the first person who signs in the computer room will unlock the door, ...
- JS倒计时两种种实现方式 很不错
最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...
- C开发系列-函数
概述 任何一个C语言程序都是有一个或多个程序段(小程序构成).每个程序都有自己的功能,我们一般称这些程序段为"函数". 函数的执行过程 #import <Foundation ...
- Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...
使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...
- [Swoole系列入门教程 3] 心跳检测
一.Swoole 的4大知识点: 1.TCP/UDP服务器 2.微服务 3.协程 二.同步与异步: 同步买奶茶:小明点单交钱,然后等着拿奶茶: 异步买奶茶:小明点单交钱,店员给小明一个小票,等小明奶茶 ...