CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
DigitalKrony
DigitalKrony

Reputation: 75

Change the color of an SVG file set at the background of and HTML object

Afternoon folks!

Ok, so I have an SVG file for the background of a DIV. I've so far been able to retrive the file, adjust the fill color and prepend it to the site so I can see the adjusted content. However, I'm trying to update the DIV with the adjusted SVG information and have had little luck. 

// use gathered URL for svg, create dummy object to load SVG into ( i might not need this)
$(thing).load(bkgImg, function()
{
    var svg = thing.find('svg');//get the SVG information

    svg.find('path').attr('fill', '#FF0000'); // getting the path, change the fill HEX

    obj.css({'background':svg}); // replacing the object bkg with altered SVG 

    $('body').prepend(svg); // so I can see the new SVG
});

There's probably a better way to get the SVG information but I don't know of one. Any information anyone might have would be most helpful.

Thanks!

Upvotes: 2

Views: 545

Answers (1)

arangelp
arangelp

Reputation: 141

If I understood your problem... This could be your problem:

JQuery can't append elements to (it does seem to add them in the DOM explorer, but not on the screen).

One workaround is to append an with all of the elements that you need to the page, and then modify the attributes of the elements using .attr().

Upvotes: 1

Related Questions