html - 将 CSS 应用于嵌入 img 标签的 SVG 图像

Question

在我的页面上，我使用 img 标签嵌入 SVG 图像。现在我想在它们上面应用一些 css。只要您将 SVG 源代码直接复制粘贴到您的页面中，这种方法就可以正常工作。但是，如果我使用 img src 属性嵌入它们，则不会。

有没有办法让它发挥作用？

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

<img src="my.svg" />

提前致谢!

Answer 1

那么可以通过JQuery来实现(解决方法)，这 Jquery函数将转换 <img>将当前 svg 图像保存到 <svg> 中的标签内联标签，你可以在你的浏览器调试器中查看它。简而言之，它会模仿好像直接插入 SVG 图片。

<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" />