2015-10-06 196 views
1

我知道如何改變Bootstrap圖形的顏色。然而,我繼承了一個CSS內部框架,其中我嘗試使用相同的原則創建一個藍色但不起作用的類,但它不起作用從黑色改變圖形SVG的顏色以添加藍色

我們只是可以選擇更改此CSS框架尤其是不能用bootstrap替代它。我想知道是否有可能加入

icon-weather-blue (does not exist , only white and black) 

這裏有2個現有的類此

.icon-weather-white{background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20white%20!important%3B%20stroke%3A%20white%20!important%3B%20%7D%3C%2Fstyle%3E%3Cg%20stroke%3D%22%23363c3d%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18.12%2053.084h28.836c2.15-.03%206.54-.804%208.957-4.326%201.433-2.068%202.047-5.79%201.116-9.112-.945-3.368-3.932-6.3-6.527-7.5.356-3.044-1.375-6.266-3.778-8.048-2.594-1.925-5.972-2.31-8.35-.993-3.45-4.036-8.09-5.866-12.485-5.367-6.71.763-11.318%205.7-11.773%2014.52C6.73%2036.4%206.47%2044.162%209.42%2048.782c1.927%203.022%205.38%204.272%208.7%204.304z%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.95%2032.663c-6.24-1.672-9.943-8.085-8.27-14.325%201.67-6.24%208.084-9.942%2014.324-8.27%203.658.98%206.616%203.67%207.936%207.22l-10.963%204.077z%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:no-repeat} 

.icon-weather{background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cg%20stroke%3D%22%23363c3d%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18.12%2053.084h28.836c2.15-.03%206.54-.804%208.957-4.326%201.433-2.068%202.047-5.79%201.116-9.112-.945-3.368-3.932-6.3-6.527-7.5.356-3.044-1.375-6.266-3.778-8.048-2.594-1.925-5.972-2.31-8.35-.993-3.45-4.036-8.09-5.866-12.485-5.367-6.71.763-11.318%205.7-11.773%2014.52C6.73%2036.4%206.47%2044.162%209.42%2048.782c1.927%203.022%205.38%204.272%208.7%204.304z%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.95%2032.663c-6.24-1.672-9.943-8.085-8.27-14.325%201.67-6.24%208.084-9.942%2014.324-8.27%203.658.98%206.616%203.67%207.936%207.22l-10.963%204.077z%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:no-repeat} 

回答

3

您可以找到URI中的筆觸顏色(使用.icon全天候例子)這裏:stroke%3D%22%23363c3d%22%3D是=,%22是」,並%23是#,所以這個字符串可以被解讀爲stroke="#363c3d"所以只改變這一部分:。363c3d將改變筆觸顏色見example