jquery - css控制svg大小 - svg css控制




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

以下是基于公认的答案的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');

        }
    };

然后,将data-bind="svgConvert: true"应用于您的img标记。

该解决方案完全用SVG替换了img标签,并且不会考虑任何其他绑定。

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

目前,嵌入SVG图像并不容易,然后通过CSS访问SVG元素。 有各种使用JS SVG框架的方法,但是如果你所做的只是制作一个带有翻转状态的简单图标,它们就会过于复杂。

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

这是一个问题:

如何在不使用JS-SVG框架的情况下嵌入SVG并将其颜色更改为CSS?


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

好处是,您可以通过CSS将部分SVG作为悬停对象 - 无需JavaScript。

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

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

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

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


如果我们有更多这样的svg图像,我们也可以借助字体文件。
https://glyphter.com/这样的站点可以从我们的svgs中获得一个字体文件。

例如

@font-face {
    font-family: 'iconFont';
    src: url('iconFont.eot');
}
#target{
    color: white;
    font-size:96px;
    font-family:iconFont;
}

如果这是一个静态更改,则在Adobe Illustrator中打开SVG文件(或任何合适的SVG编辑器)更改颜色并保存。


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

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

这使得它在大多数浏览器中呈灰色。 在IE中(可能Opera Mini,我还没有测试过),它的不透明属性明显地被淡化了,尽管它不是灰色的,但它看起来还不错。

以下是Twemoji铃铛图标的四个不同CSS类的Twemoji :原始(黄色),上面的“禁用”类, 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>
  <span class="twa-bell"></span>
  <span class="twa-bell grey-out"></span>
  <span class="twa-bell hue-rotate"></span>
  <span class="twa-bell invert"></span>
</body>

</html>


我写了一个指令来解决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
}

或者,你可以使用CSS mask ,授予浏览器支持不好,但你可以使用后备

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

样式

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

首先,在HTML中使用IMG标签来嵌入SVG图形。 我使用Adobe Illustrator制作图形。

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

这就像你嵌入正常图像一样。 请注意,您需要将IMG设置为一类svg。 “社交链接”类仅仅是为了举例。 该ID不是必需的,但是很有用。

然后使用这个jQuery代码(在单独的文件中或在HEAD中内联)。

    /*
     * 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);

            }, 'xml');

        });

上面的代码所做的是使用类的'svg'查找所有IMG,并将其替换为链接文件中的内联SVG。 其巨大的优势在于,它允许您现在使用CSS来更改SVG的颜色,如下所示:

svg:hover path {
    fill: red;
}

我编写的jQuery代码还在原始图像ID和类中进行了端口连接。 所以这个CSS也起作用:

#facebook-logo:hover path {
    fill: red;
}

要么:

.social-link:hover path {
    fill: red;
}

你可以在这里看到它的一个例子: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html : http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

我们有一个更复杂的版本,其中包含缓存: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90 : https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90





svg