<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="300" viewBox="0 0 1200 300">
  <style>
    svg {
      outline: 1px solid red;
    }
  </style>
  <radialGradient id="myGradient" r="50%">
    <stop offset="0.4" stop-color="white" />
    <stop offset="1" stop-color="black" />
  </radialGradient>
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect id="mask-content" fill="url(#myGradient)" width="1" height="1" />
  </mask>
  <symbol id="mask-shape" viewBox="0 0 1 1" preserveAspectRatio="none">
    <use href="#mask-content" />
  </symbol>
  <image href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg" />
  <use href="#mask-shape" x="33.3333%" width="33.3333%" />
  <image x="66.6666%" href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg" mask="url(#myMask)" />
  <text x="33.3333%" y="50%" text-anchor="middle" font-size="60" fill="red"> + </text>
  <text x="66.6666%" y="50%" text-anchor="middle" font-size="60" fill="red"> = </text>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.