SVG/CSS - 用不同的顏色填充不同的路徑

我有一個不同的路徑，橢圓等svg他們有不同的填充顏色。說紅色&藍色。現在，我將它們全部放入sprite中，並且現在想要使用懸停時的css修改填充顏色，所以我通常會做的是從svg中刪除填充並使用css'fill屬性完成所有操作。SVG/CSS - 用不同的顏色填充不同的路徑

但是，因爲我在這裏有不同的顏色，所以我不能簡單地做fill:red，因爲一切都會變成紅色，但我希望其中的一些變成藍色。

來源

2017-04-19 George Welder

爲了讓我們不用猜測，我們需要查看SVG – LGSon

您必須編寫腳本。 –

我已經添加了一個片段（以某種方式工作）到您的問題。可能現在你可以澄清你的目標。 – vals

您可以添加不同的類，每個路徑：

<circle class="circleClass" cx="40" cy="50" r="26"/> 
<square class="squareClass" cx="40" cy="50" r="26"/>

然後瞄準在你的CSS這些類：

.circleClass { 
    fill: red; 
}

來源

2017-04-19 12:28:24 Toby

非常感謝。我想知道如何做翱翔。 '.circleClass：hover'似乎不起作用。我也嘗試過'.icon：hover.circleClass {...'，（其中icon是svg的類，不是svg中的類），但這似乎也不起作用。 –

您需要發佈當前代碼的最簡單示例，以便任何人都可以對其進行故障排除。 – Toby

我會編輯我的問題！ –

您可以將類添加到每個路徑，也可以使用第十一個孩子。

下面是一個簡單的例子：

<path bla-bla-bla> 
<path bla-bla-bla> 
<path bla-bla-bla> 

path:nth-child(1){ 
    fill:red; 
} 

path:nth-child(2){ 
    fill:blue; 
} 

path:nth-child(3){ 
    fill:green; 
}

來源

2017-04-19 12:37:43 Gianno

你在做什麼不能工作。在<use>元素下的DOM中不存在通過<use>引用的任何內容。

.icon:hover .outer { }

不會起作用，因爲與outer類的路徑是不是.icon後代。如果你想對一個符號的內容進行樣式設計，你需要通過直接將符號應用於符號來完成。例如：

#btn-tester .outer { }

不幸的是:hover事件不適用於符號。所以你不能這樣做：

#btn-tester:hover .outer { }

即使這樣做，你可能不想那樣做。如果頁面上有該符號的其他用途，它也會改變它們。

您可能將不得不在您想要的頁面上內聯SVG。而不是使用符號。

來源

2017-04-19 14:50:31

SVG/CSS - 用不同的顏色填充不同的路徑

回答

相關問題