这是我的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>