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 ...
随机推荐
- MaxCompute安全管理指南-案例篇
通过<MaxCompute安全管理-基础篇>了解到MaxCompute和DataWorks的相关安全模型.两个产品安全方面的关联,以及各种安全操作后,本篇主要给出一些安全管理案例,给安全管 ...
- 记录一次dubbo不能正常抛出特定异常
BUG场景 今天同事的代码中出现一个问题,让我帮忙排查一下.原代码大致如下 dubbo服务消费者: @Resource private IPayWayService payWayService; @R ...
- JS 计算时间范围，最近一周、一个月
//最近一周 getDay(-7) 返回的是距离当前日期的一周后的时间//一月 getDay(-30)//一年 getDay(-365) function getDay(day){ var today ...
- 安卓手机端微信网页浏览记录清理debugx5.qq.com
最近我们环境从复)星(云切换到阿里云.早上地铁路上就有小伙伴@,一阵搜索.找的如下的方法. 记录一下: 目前只支持安卓手机的微信内置浏览器清理. 由腾讯提供的网址http://debugx5.qq.c ...
- hession RMI 远程调用
/** * * @author administror * 在java中,需要去extends 继承java.rmi.Remote 接口,才能称为在于服务器流的远程对象. * 各客服端调用 * */p ...
- Online开发初体验——Jeecg-Boot 在线配置图表
Online开发——初体验(在线配置图表) 01 通过JSON数据,快速配置图形报表 02 通过SQL数据,快速配置图形报表 03 图表模板配置,实现不同数据源图表合并展示 04 图表布局,支持单排. ...
- wifi共享大师，去除弹窗广告。
1.安装WiFi共享大师 2.不要打开 3.右键打开文件所在位置 4.在任意目录新建三个空的txt,重命名为MiniNews.exe.ProLive.exe.WifiUpdate.exe 5.将上面的 ...
- java基础之Random类
Random类 Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed), 在种子数的基础上进行一定的变换,从而产生需要的随机数字. 相同种子 ...
- #iOS问题记录# 频繁触发viewDidLayoutSubviews的问题
问题描述: 最近使用给Flutter团队写view组件的时候,出现了触发Widget的频繁build的问题. 问题排查: Flutter的同事提到在flutter层,是因为 updateViewpor ...
- git的三个区域比较
工作区: 暂存区: 提交区: 工作区与暂存区比较:git diff 工作区与提交区比较:git diff 提交hash码或者HEAD 暂存区与提交区比较:git diff --cached 两个不同提 ...