Question

.player
{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><line x1='1' y1='1' x2='9' y2='9' stroke='red'/><line x1='1' y1='9' x2='9' y2='1' stroke='red'/></svg>");
    width: 100%;
    height: 100%;
    display: inline-block;
}
.one
{
    fill: black;
}
.two
{
    stroke: white;
}

具有player类的元素将具有svg的背景图像。如果同时包含player和one或two类的元素，是否可以更改svg的样式（如果它是内联的）？如果没有，我将如何通过课程进行简单的颜色更改？理想情况下，我不想在html中引入任何更多标记，并阻止对这样一个小svg文件的http访问。

Answer 1

正如道格拉斯所写的那样，你只能使用内联“src”来设置IMG元素的样式。

我使用这种技术：

将常用图像与SVG的路径一起使用：

mainserver1 
--virtualserver4 
---- container10

使用JavaScript（jQuery）将“src”转换为内联样式：

<img src="my.svg" alt="">

使用CSS设置SVG的样式：

$('img').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');
});

完成。

Answer 2

为了使用CSS修改SVG，您必须使用内联SVG，如果您将其用作元素的背景图像，则无法使用类修改它。

如果您想要清理您的创作外观，可以使用服务器端脚本将SVG的标记推送到您的页面（例如PHP的file_get_contents（））。

由于没有办法解决这个问题，只需尽可能地压缩你的SVG（我喜欢this tool，在我附加的源代码上有一些其他好的）然后尽可能干净地编写你的svg，它应该没有如果它是一个小文件，那就太臃肿了。

来源：https://css-tricks.com/using-svg/

对不起，我不能成为好消息的承载者。

样式svgs是内联的CSS

2 个答案: