懸停時更改背景SVG的筆觸

Question

有帶有文本和箭頭圖像的按鈕：

 button { background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #00aef4; border: 2px solid #00aef4; display: inline-block; font-weight: normal; line-height: 2.3; margin: 0; outline: 0; padding: 0 1em; text-align: center; vertical-align: middle; } .button:after { background: url("/svg/right-arrow.svg") no-repeat; content: ""; display: inline-block; height: 12px; margin-left: 10px; width: 8px; } .button:hover { background: #00aef4; color: #ffffff; } 

 <button class="button">Next</button> 

因此，我需要在沒有javascript的情況下更改懸停箭頭的筆觸顏色。 如何使其成為可能？

UPD Stackoverflow不允許添加內容svg文件。 我將其發布到要點： https ://gist.github.com/bibimij/a5ae9dcc309db5547a31

Answer 1

如果沒有看到您的svg文件，您可以僅創建具有所需顏色的新圖像文件？

背景：url（“ / svg / right-arrow-hovercolor.svg”）不重復；

Answer 2

我用svg創建了一個箭頭試試這個

 button { background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #00aef4; border: 2px solid #00aef4; display: inline-block; font-weight: normal; line-height: 2.3; margin: 0; outline: 0; padding: 0 1em; text-align: center; vertical-align: middle; padding-right:30px; } .button svg{ transform:scale(.5,.5); position:absolute; margin-top:-45px; margin-left:5px; } .button:hover { background: #00aef4; color: #ffffff; } .button:hover svg path{ fill:#00aef4; stroke:white; 

 <button class="button">Next <svg width="50" height="60"> <path d=" m 0 20 30 0 0 -20 20 30 -20 30 0 -20 -30 0 "fill="white" stroke="#00aef4" stroke-width="2"/> </svg> </button>