js创建svg元素的方法

浏览数:526
2019-1-7
<!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>
喜欢 0
js创建svg元素的方法

相关推荐
