<svg xmlns="http://www.w3.org/2000/svg" width="4in" height="3in" viewBox="0 0 4 3">
  <title>三色调（三色渐变）</title>
  <mask id="photo-mask" maskContentUnits="userSpaceOnUse">
    <image href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg" width="4" height="3" />
  </mask>
  <g>
    <linearGradient id="pink-grad" y1="0.2" x2="1" y2="0.8">
      <stop offset="0" stop-color="gold" />
      <stop offset="0.4" stop-color="gold" />
      <stop offset="0.41" stop-color="papayaWhip" />
      <stop offset="0.6" stop-color="papayaWhip" />
      <stop offset="0.61" stop-color="hotPink" />
      <stop offset="1" stop-color="hotPink" />
    </linearGradient>
    <!--   背景色   -->
    <rect width="4" height="3" fill="indigo" />
    <!--   前景色（经过masked）   -->
    <rect width="4" height="3" fill="url(#pink-grad)" mask="url(#photo-mask)" />
    <text x="50%" y="50%" text-anchor="middle" font-size="0.6" fill="white" transform="rotate(-52, 2.3, 1.4)">魔都上海</text>
  </g>
</svg>