如何在不將任何CSS代碼放入svg文件內的情況下更改對象內部的SVG填充顏色

如何在不將任何CSS代碼放入svg文件內的情況下更改懸停在對象標籤內的SVG填充顏色？這裏是我的代碼：如何在不將任何CSS代碼放入svg文件內的情況下更改對象內部的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？

來源

2017-04-25 leo salayog

是你的html文件與SVG文件在同一個域？ –

沒有。我將我的svg文件分隔到另一個文件夾中。我不想使用內聯svg，因爲它會在我的html文件中填充很多空間。 –

如果它不是相同的域名，那麼你可以做任何事情。你的評論聽起來像你不明白這個問題。 –

-2

您可以使用SVG精靈。定義你的SVG你body像後：

<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>

這樣，你可以在它APLY CSS。

來源

2017-04-25 08:31:33

如何在不將任何CSS代碼放入svg文件內的情況下更改對象內部的SVG填充顏色

回答

相關問題