In terms of support, SVG

(16 August 2011) is well ahead of the CSS implementation (20 September 2021 draft).

Therefore, professional things should be handed over to professional labels.

1. Open a label

<svg width="255px" height="170px">
      <image
        width="255px"
        height="170px"
        xlink:href="http://www.81.cn/tp/attachement/jpg/site351/20211011/309c237048b022cde64014.jpg"
      ></image>
</svg>
Copy the code

2. Add the five-star red flag

<svg width="255px" height="170px">
      <image
        width="255px"
        height="170px"
        xlink:href="http://www.81.cn/tp/attachement/jpg/site351/20211011/309c237048b022cde64014.jpg"
      ></image>
       <image
        width="255px"
        height="170px"
        xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/1280px-Flag_of_t he_People%27s_Republic_of_China.svg.png"
      ></image>
</svg>
Copy the code

3. The coating<mask>

<svg width="255px" height="170px">
      <defs>
        <mask id="mask">
          <linearGradient id="linear" gradientTransform="rotate(30)">
            <stop offset="20%" stop-color="#fff" />
            <stop offset="85%" stop-color="# 111" />
            <stop offset="100%" stop-color="# 000" />
          </linearGradient>
          <rect
            x="0"
            y="0"
            width="100%"
            height="100%"
            fill="url(#linear)"
          ></rect>
        </mask>
      </defs>
      <image
        width="255px"
        height="170px"
        xlink:href="http://www.81.cn/tp/attachement/jpg/site351/20211011/309c237048b022cde64014.jpg"
      ></image>
      <image
        width="255px"
        height="170px"
        xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/1280px-Flag_of_t he_People%27s_Republic_of_China.svg.png"
        mask="url(#mask)"
      ></image>
    </svg>
Copy the code

4. Let’s move, too

     <image
        width="255px"
        height="170px"
        xlink:href="http://www.81.cn/tp/attachement/jpg/site351/20211011/309c237048b022cde64014.jpg"
      >
        <animate
          attributeName="x"
          values="100; 0"
          dur="1s"
        />
      </image>
      <image
        width="255px"
        height="170px"
        xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/1280px-Flag_of_t he_People%27s_Republic_of_China.svg.png"
        mask="url(#mask)"
      >
        <animate attributeName="x" values="- 100; 0" dur="1s" />
      </image>
Copy the code