fill property of SVG does not working in Chrome

问题

Trouble is that I can't set value (color) in fill property in Chrome, but in Firefox it works. I tried a lot ways to do it, but there is no result. The only way I see to change color of SVG icon is via jQuery (or JavaScript) by changing id of <symbol>, which is below. Please help me solve this problem!

This is what I need to work in 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>

This is bad way to solve my problem which is not approriate for me.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <svg width="0" height="0" style='display: none;' xmlns="http://www.w3.org/2000/svg">
        <symbol viewBox="0 0 2048 2048" id="crossBtnBlue">
          <path class="pathCrossBtn" fill="blue" 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>
        <symbol viewBox="0 0 2048 2048" id="crossBtnRed">
           <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="#crossBtnRed"></use>
    </svg>
</span>
<script>
;(function(){
    $('.crossBtn')
        .mouseover(function(){
            $('span svg use').attr('xlink:href','#crossBtnBlue');
        })
        .mouseleave(function(){
            $('span svg use').attr('xlink:href','#crossBtnRed');
        })
}());
</script>
</body>
</html>

回答1:

It's better if you use currentColor in your path fill attribute.

Then just add a color in your svg symbol container when you need to. You should remove the span element, there's no need to add it, it's actually bad for semantic HTML.

.icon {
  width: 30px;
  height: 30px;
}

.icon--blue {
  color: blue;
}

.icon--red {
  color: red;
}

<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="currentColor" 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>

<svg class="icon icon--red" viewBox="0 0 2048 2048">
  <use xlink:href="#crossBtn"></use>
</svg>
<svg class="icon icon--blue" viewBox="0 0 2048 2048">
  <use xlink:href="#crossBtn"></use>
</svg>

来源：https://stackoverflow.com/questions/39356404/fill-property-of-svg-does-not-working-in-chrome

标签

css

google-chrome

svg

fill