Question

我用Google搜索了这个问题大约30分钟，并且很惊讶没有人问过，也许这是不可能的。

我正在使用这一行来嵌入我在AI中创建的SVG文件（请注意，当我保存SVG时，路径上没有填充或描边）：

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

这显然没有图像，因为SVG文件没有填充或描边。我试过加入

...fill=yellow>

或

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

但我没有运气。谢谢！

Answer 1

有一个很好的诀窍：将其嵌入<img>并使用javascript将其转换为内联<svg>并使用此代码（我认为来自SO）。现在您可以操作此SVG对象

<强> 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);
            });

        });

Answer 2

您是否尝试在对象元素上添加填充或样式？如果是这样，那就行不通了。那些properties are not supported on the object element。您将不得不将其添加到SVG文件中的SVG中。

如何填写/描述我网站上的SVG文件？

2 个答案: