如何在 SVG 伪元素上设置十六进制颜色？ [复制]答案

【问题标题】：How to set hexadecimal color on SVG pseudoelement? [duplicate]如何在 SVG 伪元素上设置十六进制颜色？ [复制]
【发布时间】：2021-05-05 18:34:32
【问题描述】：

如何使用十六进制代码在 SVG 内部设置填充？第一个按钮在fill='red' 时可以正常工作，但我无法在第二个按钮中将其设置为fill='#da3737'。

.btn {
  padding: 0 0 0 1.5rem;
  color: color(secondary_2);
  position: relative;
  display: inline-block;
}
.btn:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='red' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
  position: absolute;
  left: 0;
  top: 60%;
  transform: translateY(-50%);
}

.btn2:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='#da3737' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
}

<a href="#" class="btn">Click</a>
<br>
<a href="#" class="btn btn2">Click2</a>

【问题讨论】：

标签： css svg

【解决方案1】：

#must be encoded 为 %23。

.btn {
  padding: 0 0 0 1.5rem;
  color: color(secondary_2);
  position: relative;
  display: inline-block;
}
.btn:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='red' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
  position: absolute;
  left: 0;
  top: 60%;
  transform: translateY(-50%);
}

.btn2:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='%23da3737' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
}

<a href="#" class="btn">Click</a>
<br>
<a href="#" class="btn btn2">Click2</a>

【讨论】：