将CSS应用于嵌入img标签的SVG图像 [英] Applying CSS to img-tag-embedded SVG images

问题描述

在我的页面上，我正在使用img标签嵌入SVG图片.现在，我想对它们应用一些CSS.只要将SVG源代码直接复制粘贴到页面中，此方法就可以很好地工作.但是，如果我使用img src属性嵌入它们，则不会.

On my page I'm using the img tag to embed SVG images. Now I wanted to apply some css onto them. This works well as long as you copypaste the SVG source code directly into your page. However, if I embed them using the img src attribute, it doesn't.

有没有办法使它起作用?

Is there a way to make that work?

<style type="text/css">
path:hover {
    fill:white;
}
</style>

<img src="my.svg" />

提前谢谢！

推荐答案

可以通过JQuery(变通)来实现，此Jquery函数会将保存当前svg图像的<img>标记转换为<svg>内嵌标签，您可以在浏览器调试器中查看它.简而言之，它就像直接插入SVG图片一样.

Well it can be achieved through JQuery ( Work Around ) , this Jquery function will convert <img> tag that hold current svg image into a <svg> inline tags, you can view it in your browser debugger.In short it will mimic as if directly inserted the SVG image.

<script type="text/javascript">

    $(document).ready(function() {
        $('#img').each(function(){
            var img         = $(this);
            var image_uri   = img.attr('src');

            $.get(image_uri, function(data) {
                var svg = $(data).find('svg');
                svg.removeAttr('xmlns:a');
                img.replaceWith(svg);
            }, 'xml');

        });
    });
</script>


<img id='img' src="my.svg" />

这篇关于将CSS应用于嵌入img标签的SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！