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

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

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

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

问题是这样的:

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

当前回答

您现在可以在大多数现代浏览器(包括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

其他回答

这是一个没有框架的代码，只有纯js:

document.querySelectorAll('img.svg').forEach(function(element) {
            var imgID = element.getAttribute('id')
            var imgClass = element.getAttribute('class')
            var imgURL = element.getAttribute('src')

            xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var svg = xhr.responseXML.getElementsByTagName('svg')[0];

                    if(imgID != null) {
                         svg.setAttribute('id', imgID);
                    }

                    if(imgClass != null) {
                         svg.setAttribute('class', imgClass + ' replaced-svg');
                    }

                    svg.removeAttribute('xmlns:a')

                    if(!svg.hasAttribute('viewBox') && svg.hasAttribute('height') && svg.hasAttribute('width')) {
                        svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
                    }
                    element.parentElement.replaceChild(svg, element)
                }
            }
            xhr.open('GET', imgURL, true)
            xhr.send(null)
        })

2017-11-07 20:41:21

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

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

2014-08-14 10:22:46

如果可以在页面中包含文件(PHP include或通过您选择的CMS包含)，则可以添加SVG代码并将其包含到页面中。这与将SVG源粘贴到页面相同，但使页面标记更清晰。

这样做的好处是，您可以通过CSS将SVG的某些部分用于悬停—不需要javascript。

http://codepen.io/chriscoyier/pen/evcBu

你只需要使用这样的CSS规则:

#pathidorclass:hover { fill: #303 !important; }

注意!important位是覆盖填充颜色所必需的。

2013-10-01 16:01:10

如果您希望jQuery处理DOM中的所有svg元素，并且DOM的大小合理，那么所选的解决方案是很好的。但是如果您的DOM很大，并且您决定动态加载DOM的一部分，那么为了更新svg元素而重新扫描整个DOM确实没有意义。相反，使用jQuery插件来做到这一点:

/**
 * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
 *
 * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
 *
 * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
 * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
 * any styles in a style class instead.
 */
(function ($) {
    $.fn.svgLoader = function () {
        var src = $(this).attr("src");
        var width = this.attr("width");
        var height = this.attr("height");
        var cls = this.attr("class");
        var ctx = $(this);

        // Get the svg file and replace the <svg> element.
        $.ajax({
            url: src,
            cache: false
        }).done(function (html) {
            let svg = $(html);
            svg.attr("width", width);
            svg.attr("height", height);
            svg.attr("class", cls);
            var newHtml = $('<a></a>').append(svg.clone()).html();
            ctx.replaceWith(newHtml);
        });

        return this;
    };

}(jQuery));

在html中，按如下方式指定svg元素:

<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>

并应用插件:

$(".mySVGClass").svgLoader();

2017-06-08 06:15:40

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(3,122,247)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

Chnage color: fill='rgb(3,122,247)'

2021-04-26 11:12:28

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

推荐文章

最新文章

标签