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

Question

在我的页面上，我使用img标签嵌入SVG图像。现在我想对它们应用一些CSS。只要您将SVG源代码直接复制粘贴到页面中，这样做就很好。然而，如果我使用img src属性进行嵌入，则无法实现。有没有办法使其正常工作？

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

<img src="my.svg" />

提前感谢您！

- André R.

---

你能分享一个 JSFiddle 吗？ - Dimag Kharab

Answer 1

这可以通过JQuery（解决方法）来实现，这个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" />

- Dimag Kharab

---

谢谢！我没有完全使用你的方法，但是通过服务器端代码实现了它，但这似乎是唯一的可能性。现在它可以工作了。 - André R.

Answer 2

我不认为这是可能的。你说得对，使用内联SVG将允许您操作SVG的各个部分，但将其包含在标签中则不行。请参见http://css-tricks.com/using-svg/。

- Barry T. Smith