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

【问题标题】：Applying CSS to img-tag-embedded SVG images将 CSS 应用于嵌入 img-tag 的 SVG 图像
【发布时间】：2014-11-19 13:20:03
【问题描述】：

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

有没有办法让它工作？

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

<img src="my.svg" />

提前致谢！

【问题讨论】：

你能为此分享一个 jsfiddle

标签： html css svg

【解决方案1】：

这可以通过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" />

【讨论】：

谢谢！我并没有完全使用您的方法，而是通过服务器端代码进行的，但这似乎是唯一的可能性。现在可以使用了。

【解决方案2】：

我认为这是不可能的。您是正确的，因为使用 inline-SVG 将允许您操作 svg 的各个部分，但不会将其包含在 img 标记中。见http://css-tricks.com/using-svg/

【讨论】：