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 ...
随机推荐
- 19-11-13-Night-∠
连夜补博客 ZJ: 看见T1就自闭了.(高考数学)(但是好像不是) 三个暴力就结束了. 35 Miemeng 20 00:00:41 10 00:00:41 10 00:00:41 40 00:00: ...
- iPhone开发关于UDID和UUID的一些理解
一.UDID(Unique Device Identifier) UDID是Unique Device Identifier的缩写,中文意思是设备唯一标识. 在很多需要限制一台设备一个账号的应用中 ...
- VS2010-MFC（对话框：设置对话框控件的Tab顺序）
转自:http://www.jizhuomi.com/software/158.html 上一讲为“计算”按钮添加了消息处理函数后,加法计算器已经能够进行浮点数的加法运算.但是还有个遗留的小问题,就是 ...
- Sharepoint常见概念
有待补充: 1.环境部署(AD+DNS+SQL+SharePoint前端): SharePoint基本都是这样的结构,可以在多台服务器中,也就是场,当然也可以在一台服务器上.说说这几部分的功能 (1) ...
- Python学习day12-函数基础(2)
<!doctype html>day12博客 figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { pos ...
- 07-img和a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 从0开始学习ssh之岗位管理
岗位应该有如下属性,id.名称.说明.新建role.java.添加id,name,description并增加三个的get set方法. 之后建立Role.hbm.xml 并加入到applicatio ...
- Open CASCADE Technology: IGES Support
2015/6/4 Open CASCADE Technology: IGES Support http://www.opencascade.org/doc/occt6.7.0/overview/ht ...
- JPA、Hibernate、Spring data jpa之间的关系
什么么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支 ...
- LUOGU P4074 [WC2013]糖果公园 (树上带修莫队)
传送门 解题思路 树上带修莫队,搞了两天..终于开O2+卡常大法贴边过了...bzoj上跑了183s..其实就是把树上莫队和带修莫队结合到一起,首先求出括号序,就是进一次出一次那种的,然后如果求两个点 ...