Question

目标是显示图像，但在svg中显示另一种颜色。我尝试了带背景颜色的-webkit-mask-image，但这种组合在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>

Answer 1

看不到你的例子，但是：

＆＃13;

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>

＆＃13;

使用填充选项！

编辑：现在我可以看到你的代码。如果您将图像插入PNG：

数据：图像/ PNG

然后我怀疑你可以用HTML指令改变颜色。 PNG是位图而不是SVG，您必须编辑PNG本身才能实现这一点。

更改svg元素中的图像颜色

1 个答案: