将CSS应用于嵌入img-tag的SVG图像-Java 学习之路

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

有没有办法让这项工作？

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

<img src="my.svg" />

提前致谢！

2 回答

那么它可以通过 JQuery （Work Around）来实现，这个 Jquery 函数会将保存当前svg图像的 <img> 标记转换为 <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" />

回复于 2024-04-29T03:10:03+08:00

1

我不认为这是可能的 . 你是正确的，使用内联SVG将允许你操纵svg的部分，但不包括在 img 标签中 . 见http://css-tricks.com/using-svg/

回复于 2024-04-29T03:10:03+08:00

将CSS应用于嵌入img-tag的SVG图像

2 回答

相关问题