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 ...
随机推荐
- thinkphp 自动验证
自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 大理石平台价格表 验证规则 数据验证可以进行数据类型.业务规则.安全判断等方面的验证 ...
- 抓包：MySQL Sniffer
1.依赖文件安装 依赖glib2-devel.libpcap-devel.libnet-devel [root@VMUest ~]# yum install cmake [root@VMUest ~] ...
- C++【string】用法和例子
/*** * string 基础api复习 * 8 AUG 2018 */ #include <iostream> #include <string> using namesp ...
- elasticsearch 中文API river
river-jdbc 安装 ./bin/plugin --install jdbc --url http://xbib.org/repository/org/xbib/elasticsearch/pl ...
- 安装sklearn的一点事故解决
安装sklearn过程出现挺多问题的.这里记录下一下问题点避免下次走弯路 1.安装ANACONDA,避免太多插件的手动安装,选用版本Anaconda3-4.3.1-Windows-x86_64.rar ...
- [NOI2015] 软件包管理器【树链剖分+线段树区间覆盖】
Online Judge:Luogu-P2146 Label:树链剖分,线段树区间覆盖 题目大意 \(n\)个软件包(编号0~n-1),他们之间的依赖关系用一棵含\(n-1\)条边的树来描述.一共两种 ...
- 两台linux 服务器同步
准备: 主服务器 192.168.0.1 备份服务器 192.168.0.2 备份服务器 注意需要开放873端口 而且小心selinux 开始: sudo vim /etc/rsyncd.passwd ...
- Odoo(OpenERP)配置文件详解
[options] ; addons模块的查找路径 addons_path = E:\GreenOdoo8.0\source\openerp\addons ; 管理员主控密码(用于创建.还原和备份数据 ...
- 历届试题_DNA比对
脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为:A.G.C.T. ...
- [转]用HttpSessionListener与HttpSessionBindingListener实现在线人数统计
原文链接:http://www.cnblogs.com/shencheng/archive/2011/01/07/1930227.html 下午比较闲(其实今天都很闲),想了一下在线人数统计方面的实现 ...