How do I fill/stroke an SVG file on my website?

问题

I Googled this issue for about 30 minutes and was surprised nobody has asked so maybe it's not possible.

I'm using this line to embed the SVG file that I made in AI (note that when I saved the SVG, I had no fill OR stroke on the paths):

<object type="image/svg+xml" data="example.svg" height=600px width=600px>Your browser does not support SVG</object>

This obviously comes up with no image because the SVG file has no fill or stroke. I tried adding in

...fill=yellow>

...style="fill:yellow;">

but I'm not having any luck. Thanks!

回答1:

Have a nice trick: Embed it as <img> and use javascript to convert it into inline <svg> with this code (that came from SO I think). Now you can manipulate this SVG object

CODE::


        /*
        * Replace all SVG images with inline SVG
        */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);
            });

        });

回答2:

Are you trying to add the fill or style on the object element? If so, that's not going to work. Those properties are not supported on the object element. You're going to have to add it into the SVG in the SVG file.

来源：https://stackoverflow.com/questions/16697299/how-do-i-fill-stroke-an-svg-file-on-my-website

标签

svg

fill

stroke