时间戳

首页 > 解决方案 > 是否有混合模式来替换黑色并保留其他颜色（即白色）？

svg - 是否有混合模式来替换黑色并保留其他颜色（即白色）？

问题描述

我想在flutter_svg中创建一个动态彩色地图标记

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" height="100%" version="1.1" viewBox="0 0 24 24" width="100%"  xmlns="http://www.w3.org/2000/svg"  xml:space="preserve">
    <g transform="matrix(1,0,0,1,4,0)">
    <path style="fill:rgb(0,0,0);" d="M8.25,0C3.689,0 0,3.756 0,8.4C0,14.7 8.25,24 8.25,24C8.25,24 16.5,14.7 16.5,8.4C16.5,3.756 12.811,0 8.25,0Z"/>
    <path style="fill:rgb(255,255,255);" d="M8.25,11.4C6.624,11.4 5.304,10.056 5.304,8.4C5.304,6.744 6.624,5.4 8.25,5.4C9.876,5.4 11.196,6.744 11.196,8.4C11.196,10.056 9.876,11.4 8.25,11.4Z"/>
    </g>
</svg>

看起来像这样：

标记

我正在尝试混合模式。

如果我使用这个：

SvgPicture.asset(
      "assets/images/to_marker.svg",
      package: "trufi_core",
      color: const Color(0xff27ae60),
      colorBlendMode: BlendMode.difference,
    )

白色变得透明：

结果

是否甚至有一种混合模式只是用颜色替换黑色，并保持白色完好无损，还是我必须使用一些颜色替换？

有没有另一种方法来替换flutter_svg中的颜色，也许是用CSS？

标签： svgfluttergraphics

解决方案

通过蛮力（尝试所有模式）我发现，这BlendMode.screen适用于这种情况

推荐阅读