The graphics were made in Inkscape. I have a notion that I embedded a scale command in the svg somehow, but I don't know where to look. Any ideas on how to debug this?
In the following code, we are trying to make an SVG element slowly appear and disappear. It blinks instead of fading in and out. ( same in Chrome 11 and FF5 )
This snippet works ( appropriate libraries) on a simple div background. But it doesn't work on an SVG rectangle with no fill but with a stroke which we are trying to pulse.
In each case, the SVG reacts once, but not repeatedly, whereas the div pulses at it should. Simply calling fadeIn() or changing the color one time on the SVG works perfectly.
pulse('#rect1234');
function pulse(myselector){
$(myselector).css("stroke", hotorange );
var short_interval = window.setInterval(function() {
$(myselector).fadeOut( 1000);
bs = myselector; //scope thing fix later
var t = setTimeout( "$(bs).fadeIn( 3000)", 1500);
}, 4000 );
/}
Similarly this effect from the UI works on the div but not on the svg:
I have an svg object set with hover (or mouseover-out) to animate the superfish menu. When the mouse enters the svg, the menu appears, on leaving it should disappear. (same problem with div so not an svg problem)
(testing with FF5.01)
Problem: mouseover, or hover work fine, but when I add a second function to remove the menu, I get a blinking menu. I assume its a conflict with the menu's own hover?
How can I workaround this? I want the menu to go away when the mouse leaves the svg and menu.
///////// works but menu never goes away ////////////
I have followed K Wood's suggestion and gotten my div to clone a single svg multiple times, but I am doing something fundamentally wrong when I try to add different svgs. I start with red.svg, then add green.svg, but when I add blue.svg, green disappears. ( using FF5.01)
Actual design problem: I need to load a series of rectangles, either as groups from a single file or separate files, and make them resize and move and disappear individually. They have to appear to be exactly next to each other ( they are components in an animated rack server)
// prepare the dom and then load the svg
var svg;
$(document).ready(function(){
getsvg();
});
// load the svg
function getsvg(){
$("#svgupper").svg({
loadURL: 'red.svg',
onLoad: main,
settings: {}
} );
svg = $("#svgupper").svg('get');
}
function main(){
// depends on svg definition in getsvg()
// at this point I have red //////////////////////////////////
$.get('green.svg', null, function(data) {
svg.add(data.documentElement);
$('svg', svg.root()).each(function(i) {
svg.change(this, {x: 200, y: 100});
});
}, 'xml');
// at this point I have red and green ///////////////////////
$.get('blue.svg', null, function(data2) {
svg.add(data2.documentElement);
$('svg', svg.root()).each(function(i) {
svg.change(this, {x: 100, y: 100});
});
}, 'xml');
// at this point I have red and blue //////////////////////