Html 在svg元素中更改图像颜色

目标是显示图像，但在svg中使用另一种颜色。 我尝试了使用背景色的webkit掩码图像，但这种组合在svg中不起作用。以下是一个例子：

<div class="dashboard-buttons">
  <svg  width="367" height="243.5" viewBox="252.5 60.5 367 243.5">
    <g>
      <rect width="46" height="46" rx="4" ry="4" transform="translate(-23, -23)" style="fill:white" x="560" y="224"></rect>
      <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3" href="#element3" onclick="window.location.href = '#element3';">
        <image height="32" width="32" transform="translate(-16, -16)" x="560" y="224" style="background-color: Red; -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==');width: 32px; height: 32px;"></image>
      </a>

      <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3"><text filter="url(#fillbackground)" x="560" y="257">out</text></a>
    </g>
  </svg>
</div>

如果从中删除svg标记，则此示例将正常工作，颜色也将更改

您知道如何正确更改svg中的图像颜色吗

编辑：

以下代码适用于Chrome，但不适用于Firefox：

<div class="wrapper">
    <svg width="200" height="300" class="svg">
        <defs>  
   <mask id="mask">
        <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==">
  </image>
        </mask>
 </defs>

              <rect width="50" height="50" style="fill:blue;" x="0" y="0" 
mask="url(#mask)"></rect>

    </svg>

</div>

---

看不到您的示例，但是：

---

寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是以最短的格式。请看，它在Firefox中不起作用，因为第二个示例中的image元素没有width和height属性。谢谢您的回答。这是否意味着如果我用svg编码的图像替换这个png，那么这个示例必须工作？我尝试了数据：image/svg+xml；base64，。。。图像和它没有帮助