<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    polygon { fill: black }

    div {
      color: white;
      font:18px serif;
    }
	.currentDate {
		text-align: center;
	}
	.currentTime {
		text-align: center;
	}
  </style>
  <polygon points="5,5 195,5 195,80 5,80" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="5" y="5" width="195" height="80">
    <!--
      In the context of SVG embeded into HTML, the XHTML namespace could
      be avoided, but it is mandatory in the context of an SVG document
    -->
	<div xmlns="http://www.w3.org/1999/xhtml">
      <div class="currentDate">
		2022年5月28日 星期六
	  </div>
	  <div class="currentTime">
		14:47:36
	  </div>
	</div>
  </foreignObject>
</svg>