概述
需要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 {
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>
最后
以上就是能干黄蜂为你收集整理的html5 js创建svg,js创建svg元素的方法的全部内容，希望文章能够帮你解决html5 js创建svg,js创建svg元素的方法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复