<div>
  <label>
    background：
    <input type="color" value="#402020" onchange="onBackgroundChange(arguments[0])" />
  </label>
</div>
<div style="margin-top: 5px">
  <label>
    foreground：
    <input type="color" value="#FFC480" onchange="onForegroundChange(arguments[0])" />
  </label>
</div>
<br>
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 12 6">
  <title>Duotone Photographs from Masked Rectangles</title>
  <mask id="photo-mask" maskContentUnits="userSpaceOnUse">
    <image id="photo" href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg" width="4" height="3" />
  </mask>
  <defs>
    <rect id="background" width="4" height="3" fill="#402020" />
    <rect id="foreground" width="4" height="3" fill="#FFC480" />
    <rect id="foreground-masked" width="4" height="3" fill="#FFC480" mask="url(#photo-mask)" />
  </defs>
  <g>
    <use href="#background" />
    <text x="2" y="1.5" text-anchor="middle" font-size="0.3" fill="red">background 背景色</text>
  </g>
  <g transform="translate(4)">
    <use href="#foreground-masked" />
    <text x="2" y="1.5" text-anchor="middle" font-size="0.3" fill="red">foreground 前景色</text>
    <text x="2" y="1.9" text-anchor="middle" font-size="0.2" fill="red">(经过图片masked)</text>
  </g>
  <g transform="translate(8)">
    <use href="#background" />
    <use href="#foreground-masked" />
    <text x="2" y="1.5" text-anchor="middle" font-size="0.3" fill="red">双色调图片</text>
  </g>
  <text x="4" y="1.5" text-anchor="middle" font-size="0.6" fill="red">+</text>
  <text x="8" y="1.5" text-anchor="middle" font-size="0.6" fill="red">⇒</text>

  <g transform="translate(0, 3)">
    <use href="#foreground" />
    <text x="2" y="1.5" text-anchor="middle" font-size="0.3" fill="red">foreground 前景色</text>
  </g>
  <g transform="translate(4, 3)">
    <use href="#photo" />
    <text x="2" y="1.5" text-anchor="middle" font-size="0.3" fill="red">图片&lt;mask&gt;</text>
  </g>
  <text x="4" y="4.5" text-anchor="middle" font-size="0.6" fill="red">+</text>
  <text x="6" y="3" text-anchor="middle" font-size="0.6" fill="red" transform="rotate(-90, 6, 3)">⇒</text>
</svg>

function onBackgroundChange(e) {
  const backgroundRect = document.getElementById("background");
  backgroundRect.setAttribute("fill", e.target.value);
}

function onForegroundChange(e) {
  const foregroundRect = document.getElementById("foreground");
  const foregroundMasked = document.getElementById("foreground-masked");
  foreground.setAttribute("fill", e.target.value);
  foregroundMasked.setAttribute("fill", e.target.value);
}