0

我正在使用库raphael-svg-import-classic。

有人知道如何导入带有渐变和纹理的 svg 文件吗？

我使用我在公司使用的相同代码，（相同，我想是的，现在我无法再访问它，但我正在使用的代码使用相同的库 raphael svg import classic）。

jQuery(document).ready(function(){
    jQuery.ajax({
    type: "GET",
    url: "assets/demo.svg",
    dataType: "xml",
    success: function(svgXML) {
        var paper = Raphael(10, 10, 800, 600);
        var newSet = paper.importSVG(svgXML);
        }
    });
});

在调试器中没有错误，我可以导入文件但 svg 元素没有纹理和渐变。

4

1 回答 1

1

这是我的js代码。

正如我之前提到的，元素出现但没有纹理和渐变。

<script type="text/javascript">
    function mouseHover(svgObjects){
        var mouseover = function (event) {
            this.attr({opacity:0.8});
        }
        var mouseout = function (event) {
            this.attr({opacity:1});
        }
        svgObjects.hover(mouseover, mouseout);
    }

    function dragNdrop(paper, newSet, svgObjects){
        var posX = 't' + svgObjects.getBBox().x;
        var posY = svgObjects.getBBox().y;

        mouseHover(svgObjects);

        var start = function () {
            this.ox = 0;
            this.oy = 0;
        },
        move = function (dx, dy) {
            var objectScale = this.matrix.a;
            var trans_x = dx-this.ox;
            var trans_y = dy-this.oy;
            if(((this.matrix.e>0) 
                    && (this.matrix.e+this.getBBox().width)<paper.width
                    && (this.matrix.f>0) 
                    && (this.matrix.f+this.getBBox().height)<paper.height
                )){
                this.translate(trans_x/objectScale,trans_y/objectScale);
                if(((this.matrix.e>newSet.getBBox().x) 
                    && (this.matrix.e+this.getBBox().width)<newSet.getBBox().x2
                    && (this.matrix.f>newSet.getBBox().y) 
                    && (this.matrix.f+this.getBBox().height)<newSet.getBBox().y2
                )){
                    newSet.attr({opacity:0.7});
                }else{
                    newSet.attr({opacity:1});
                }
            }
            this.ox = dx;
            this.oy = dy;
        },
        up = function () {
            if(!((this.matrix.e>newSet.getBBox().x) 
                    && (this.matrix.e+this.getBBox().width)<newSet.getBBox().x2
                    && (this.matrix.f>newSet.getBBox().y) 
                    && (this.matrix.f+this.getBBox().height)<newSet.getBBox().y2
                )){
                this.animate({
                    transform: '"' + posX + ',' + posY + ',s1' + '"'
                }, 500, 'easeIn');   
            }else{
                newSet.attr({opacity:1});
            }
        };
        paper.set(svgObjects).drag(move, start, up);
    }

    function getSVG(url){
        jQuery.ajax({
            type: "GET",
            url: "images/tshirt.svg",
            dataType: "xml",
            success: function(svgXML) {
                var width = 1024; 
                var height = 768;
                var paper = Raphael('tela', width, height);
                var newSet = paper.importSVG(svgXML);
                var basePlusValue = newSet.getBBox().width;
                var centerBase = (width/2)-(basePlusValue/2);
                newSet.translate(centerBase, 20);
                newSet.attr({id : 'base'});
                jQuery.ajax({
                    type: "GET",
                    url: url,
                    dataType: "xml",
                    success: function(svgComponent) {
                        var newComponent = paper.importSVG(svgComponent);
                        var spacePaperToElement = newComponent.getBBox().width*2;
                        newComponent.translate(centerBase + spacePaperToElement, 20);
                        newComponent.attr({cursor: "pointer"});
                        dragNdrop(paper, newSet, newComponent);
                        var texture1 = paper.image('images/textures/text1.jpg', centerBase + spacePaperToElement, 160, 100, 100);
                        texture1.attr({cursor: "pointer"});
                        mouseHover(texture1);
                        function handler(){
                            var cloneTexture1 = this.clone();
                            cloneTexture1.translate(-500, -100);
                            cloneTexture1.attr({opacity:1});
                            texture1.unclick(handler);
                        }
                        texture1.click(handler);

                    }
                });
            }
        }); 
    }

    jQuery(document).ready(function(){
        getSVG("images/horse.svg");
    });
</script>
于 2013-04-15T09:16:24.663 回答