用css着色SVG內容網址

Question

我有一個按鈕設置如下：

<button class="buttonclass"><i class="iconclass plus-icon"></i></button>

我的css類看起來像這樣：

.buttonclass {
  width: 30px;
  height: 30px;
  text-align: center;
  position: relative;
  border-radius: 20px;
  background-color: #1DBE60
}

.iconclass {
  width: 20px;
  height: 20px;
  margin: 7.5px;
}

.buttonclass .iconclass {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus-icon {
  content: url(http://uxrepo.com/static/icon-sets/mfg-labs/svg/plus.svg);
}

如果它是SVG，如何用css更改'plus-icon'的顏色？ 我已經嘗試將填充類添加到svg，顏色類，背景類等。

這是一個插件： http ：//plnkr.co/edit/6fLYQlpFmDdf7aWenBtp？ p = preview

Answer 1

如果您樂意添加一個額外的類（對於加號圖標的顏色），那么這里是使用currentColor CSS變量的僅CSS解決方案：

 .buttonclass { width: 30px; height: 30px; text-align: center; position: relative; border-radius: 20px; background-color: #1DBE60 } .iconclass { width: 20px; height: 20px; margin: 7.5px; } .buttonclass .iconclass { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .plus-icon { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="0" y="12" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="12" width="8" height="8" fill="rgb(29,190,96)" /></svg>'); background-color: currentColor; border: 1px solid rgb(29,190,96); border-radius: 15px; } .white { color: rgb(255,255,255); } .yellow { color: rgb(255,255,0); } .green { color: rgb(0,255,0); } 

 <button class="buttonclass"><i class="iconclass plus-icon white"></i></button> <button class="buttonclass"><i class="iconclass plus-icon yellow"></i></button> <button class="buttonclass"><i class="iconclass plus-icon green"></i></button> 

Answer 2

您必須將svg內聯，但考慮使用<use>元素，以便您可以通過引用它多次使用圖標：

http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

Answer 3

我最終在這里尋找一種為svg圖標着色的方法。 投票最多的答案對我沒有幫助，所以經過一些谷歌搜索我遇到了這個有趣的編碼 。

長話短說我使用這個CSS為我的svg圖標着色：

.plus-icon {
    -webkit-mask: url('../images/plus.svg') no-repeat 50% 50%;
    mask: url('../images/plus.svg') no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.white {
    background-color: rgb(255,255,255);
}

更新：

不與IE合作。