小编Hom*_*ado的帖子

SVG的fill属性在Chrome中不起作用

麻烦的是,我无法在Chrome中的fill属性中设置值(颜色),但在Firefox中它可以工作。我尝试了很多方法来做,但是没有结果。我看到的更改SVG图标颜色的唯一方法是通过jQuery(或JavaScript)更改<symbol>下面的id来实现。请帮我解决这个问题!

这是我需要在Chrome中使用的功能:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span:hover .pathCrossBtn{
            fill: blue;
        }
    </style>
</head>
<body>
    <svg width="0" height="0" style='display: none;' xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 2048 2048" id="crossBtn">
        <path class="pathCrossBtn" fill="red" d="M1618 1450q0 40-28 68l-136     136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
    </symbol>
</svg>
<span>
    <svg class="crossBtn" viewBox="0 0 2048 2048" width="30" height="30">
        <use xlink:href="#crossBtn"></use>
    </svg>
</span>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

这是解决我不适合我的问题的不好方法。 …

css svg google-chrome fill

2
推荐指数
1
解决办法
7350
查看次数

标签 统计

css ×1

fill ×1

google-chrome ×1

svg ×1