html - 悬停时更改背景 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") 不重复；