Html5之Svg对象的构造方法

最新推荐文章于 2024-05-24 23:22:35 发布

言多_必失

最新推荐文章于 2024-05-24 23:22:35 发布

阅读量780

点赞数

分类专栏： svg

svg 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何使用JavaScript动态创建SVG图像，并介绍了在不同浏览器中的兼容性问题。此外，还分享了一种利用HTML5的新特性来简化SVG图像创建的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

S V G(可放缩的矢量图形)是W3C(World Wide Web ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。

W3C是作为一个国际X的工业联盟而创建的，目的是领导整个互联网协作的发展和创新，以实现科技的进步和共同发展。由于W3C联盟关于SVG的开发工作组的成员都是一些知名厂商，如Adobe、苹果、Aut0De sk、Bit Fla sh、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(C C LRC)、S un、V i S i 0、施乐等，所以SVG不是一个私有格式，而是一个开放的标准。也就是说，它并不属于任何个体的专利，而是一个通过协作、共同开发的工业标准。正是因为这点，才使得SVG能够得到更迅速的开发和应用。

但是传统的svg只能通过<object>标签引入

XML/HTML Code 复制内容到剪贴板

<object type="image/svg+xml" data="****/data.svg" width="20px" height="20px"></object>

也就是说，要在画面上动态创建svg图像在这一标准上是很困难的。

翻阅了很多资料后，发现国外的framework中，针对data属性，做了些改进

将data:image/svg+xml,+svg标签内容后，也可以显示出svg图像。

这使得动态创建svg图像成为了可能

于是，我试着创建了以下类

JavaScript Code 复制内容到剪贴板

    (function() {    
            
        var userAgent = navigator.userAgent;    
        var isWebKit = /webkit/i.test(userAgent);    
            
        SvgHelper = function(containerId, width, height) {    
                
            this.container = document.getElementById(containerId);    
            this.width = parseInt(width) + 'px';    
            this.height = parseInt(height) + 'px';    
                
            this.svg = '<?xml version="1.0" encoding="utf-8"?>'+    
               '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" '+    
               'xmlns:xlink="http://www.w3.org/1999/xlink" width="' +     
               this.width + '" height="' + this.height + '">';    
        };    
            
        SvgHelper.prototype = {    
                
            /**  
             * 构造SVG  
             */    
            getSvg: function() {    
                    
                if (this.svgObject) {    
                    return this.svgObject;    
                }    
                    
                this.svgObject = createElement('object', {     
                    width: this.width,    
                    height: this.height,    
                    type: 'image/svg+xml'    
                }, {    
                    position : "ABSOLUTE",    
                    left: 0,    
                    top: 0    
                }, this.container);    
            },    
                
            /**  
             * 测试函数  
             */    
            drawCircle: function() {    
                this.getSvg();    
                this.svg += "<rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"50\" fill=\"green\" stroke=\"red\"/>";    
            },    
                
            /**  
             * 重绘  
             */    
            repaint: function() {    
                var svgObject = this.getSvg();    
                svgObject.data = 'data:image/svg+xml,'+ this.svg +'</svg>';    
                    
                if (isWebKit) this.container.appendChild(svgObject);    
            }    
                
        };    
            
        function createElement(tagName, tagProp, tagStyle, container) {    
        
            var tagElement = document.createElement(tagName);    
        
            if (tagProp) {    
                for (var prop in tagProp) {    
                    tagElement[prop] = tagProp[prop];    
                }    
            }    
        
            if (tagStyle) {    
                for (var prop in tagStyle) {    
                    tagElement.style[prop] = tagStyle;    
                }    
            }    
                
            if (container) {    
                container.appendChild(tagElement);    
            }    
                
            return tagElement;    
        }    
            
    })();

在window.onload中

JavaScript Code 复制内容到剪贴板

 var help = new SvgHelp("container", 200, 200);  
    help.drawCircle();  
    help.repaint();

在firefox中可以正确显示出图形。而在chrome中却不行。但是如果将container.appendChild改成document.body.appendChild，又能正确的显示。。。

查阅了若干资料后，终于作罢。因为发现了html5中，对于svg标准又有了新的定义。

XML/HTML Code 复制内容到剪贴板

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
    <html>    
    <script type="text/javascript" src="js/svghelper.js"></script>    
    <script type="text/javascript">    
    window.onload = function() {    
            
        var container = document.getElementById('container');    
        var svgns = 'http://www.w3.org/2000/svg';    
        var svg = document.createElementNS(svgns, 'svg');    
        svg.setAttribute('width', '300px');    
        svg.setAttribute('height', '300px');    
            
        // our linearGradient    
        var defs = document.createElementNS(svgns, 'defs');    
        var gradient = document.createElementNS(svgns, 'linearGradient');    
        gradient.setAttribute('id', 'myGradient');    
        gradient.setAttribute('x1', '0%');    
        gradient.setAttribute('y1', '100%');    
        gradient.setAttribute('x2', '100%');    
        gradient.setAttribute('y2', '0%');    
        var stop = document.createElementNS(svgns, 'stop');    
        stop.setAttribute('offset', '5%');    
        stop.setAttribute('stop-color', 'red');    
        gradient.appendChild(stop);    
        stop = document.createElementNS(svgns, 'stop');    
        stop.setAttribute('offset', '95%');    
        stop.setAttribute('stop-color', 'blue');    
        stop.setAttribute('stop-opacity', '0.5');    
        gradient.appendChild(stop);    
        defs.appendChild(gradient);    
        svg.appendChild(defs);    
            
        // our example circle    
        var circle = document.createElementNS(svgns, 'circle');    
        circle.setAttribute('cx', '50%');    
        circle.setAttribute('cy', '50%');    
        circle.setAttribute('r', 100);    
        circle.setAttribute('fill', 'url(#myGradient)');    
        circle.setAttribute('stroke-color', 'red');    
        circle.addEventListener('mousedown', function() {    
          alert('hello');    
        }, false);    
        svg.appendChild(circle);    
        container.appendChild(svg);    
            
    };    
        
    </script>    
        
    <body>    
        <div id="container">    
                
        </div>    
    </body>    
          
    </html>

用带ns的createElement方法，可以轻松的创建出svg对象，而无需object标签。

以上代码在Firefox和chrome上测试通过。