如何改变颜色的SVG图像使用CSS (jQuery SVG图像替换)?

这是我提出的一段方便的代码的自我问答。

目前，还没有一种简单的方法来嵌入SVG图像，然后通过CSS访问SVG元素。使用JS SVG框架有多种方法，但如果您所做的只是制作一个带有翻转状态的简单图标，那么这些方法就过于复杂了。

所以这就是我想到的，我认为这是迄今为止在网站上使用SVG文件的最简单的方法。它的概念来自于早期的文本到图像替换方法，但据我所知，还从未用于svg。

问题是这样的:

我如何在CSS中嵌入SVG并改变其颜色而不使用JS-SVG框架?

当前回答

我用AngularJS写了一个指令来解决这个问题。它可在这里- ngReusableSvg。

它在SVG元素被呈现后替换它，并将其放置在div元素中，使其CSS易于更改。这有助于在不同的地方使用相同的SVG文件，使用不同的大小/颜色。

用法很简单:

<object oa-reusable-svg
        data="my_icon.svg"
        type="image/svg+xml"
        class="svg-class"
        height="30"  // given to prevent UI glitches at switch time
        width="30">
</object>

之后，你就可以轻松地拥有:

.svg-class svg {
    fill: red; // whichever color you want
}

2015-09-16 20:21:10

其他回答

我用AngularJS写了一个指令来解决这个问题。它可在这里- ngReusableSvg。

它在SVG元素被呈现后替换它，并将其放置在div元素中，使其CSS易于更改。这有助于在不同的地方使用相同的SVG文件，使用不同的大小/颜色。

用法很简单:

<object oa-reusable-svg
        data="my_icon.svg"
        type="image/svg+xml"
        class="svg-class"
        height="30"  // given to prevent UI glitches at switch time
        width="30">
</object>

之后，你就可以轻松地拥有:

.svg-class svg {
    fill: red; // whichever color you want
}

2015-09-16 20:21:10

风格

svg path {
    fill: #000;
}

脚本

$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

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

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});

2016-02-01 09:21:15

下面是knockout.js基于公认答案的一个版本:

重要:它实际上也需要jQuery来替换，但我认为它可能对一些人有用。

ko.bindingHandlers.svgConvert =
    {
        'init': function ()
        {
            return { 'controlsDescendantBindings': true };
        },

        'update': function (element, valueAccessor, allBindings, viewModel, bindingContext)
        {
            var $img = $(element);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            $.get(imgURL, function (data)
            {
                // Get the SVG tag, ignore the rest
                var $svg = $(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);

            }, 'xml');

        }
    };

然后对img标签应用data-bind="svgConvert: true"。

这个解决方案完全用SVG替换了img标记，任何附加的绑定都不会受到尊重。

2016-10-01 02:53:15

您现在可以在大多数现代浏览器(包括Edge，但不包括IE11)中使用CSS filter属性。它适用于SVG图像和其他元素。您可以使用色调旋转或反转来修改颜色，尽管它们不允许您单独修改不同的颜色。我使用下面的CSS类来显示一个图标的“禁用”版本(其中原始是一个饱和颜色的SVG图片):

.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

这使得它在大多数浏览器中呈浅灰色。在IE中(可能还有我没有测试过的Opera Mini)，它会因为不透明属性而明显褪色，尽管不是灰色，但看起来仍然很不错。

下面是Twemoji铃铛图标的四个不同CSS类的示例:original(黄色)、上面的“disabled”类、hue-rotate(绿色)和invert(蓝色)。

.twa-bell { background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg"); display: inline-block; background-repeat: no-repeat; background-position: center center; height: 3em; width: 3em; margin: 0 0.15em 0 0.3em; vertical-align: -0.3em; background-size: 3em 3em; } .grey-out { opacity: 0.4; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .hue-rotate { filter: hue-rotate(90deg); -webkit-filter: hue-rotate(90deg); } .invert { filter: invert(100%); -webkit-filter: invert(100%); } <!DOCTYPE html> <html> <head> </head> <body> </body> </html>

2016-06-28 19:10:37

或者你可以使用CSS蒙版，授予浏览器的支持不是很好，但你可以使用一个备用

.frame {
    background: blue;
    -webkit-mask: url(image.svg) center / contain no-repeat;
}

2014-08-14 10:22:46

如何改变颜色的SVG图像使用CSS (jQuery SVG图像替换)?

推荐文章

最新文章

标签