Question

如何在不在svg文件中放置任何CSS代码的情况下将鼠标悬停在对象标记内时更改SVG填充颜色？这是我的代码：

<div class="icon-holder">
    <object data="http://useaible.com/wp-content/themes/storefront/assets/images/icons/bulb-round.svg"></object>
</div>

我知道如果CSS不在SVG文件中，CSS就无法工作。有没有其他方法可以实现悬停效果而不使用内联SVG，也不在SVG文件中使用CSS？

Answer 1

您可以使用SVG精灵。在body之后定义你的svg：

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-facebook" viewBox="0 0 16 32">
    <title>facebook</title>
    <path class="path1" d="M4.973 30.593v-13.872h-4.973v-4.984h4.974v-4.433c0-4.595 2.775-7.303 6.874-7.303 1.964 0 3.66 0.211 4.152 0.276v5.053l-3.393-0.001c-2.229 0-2.646 1.106-2.646 2.66v3.749h5.711l-0.807 4.984h-4.904v13.872h-4.988z"></path>
    </symbol>
  </defs>
</svg>

并在您的代码中调用它：

<svg class="icon-facebook"><use xlink:href="#icon-facebook"></use></svg>

这样你可以在它上面使用CSS。

如何在不在svg文件中放入任何css代码的情况下更改对象内的SVG填充颜色

1 个答案: