SVG background watermark

SVG 背景水印



<svg xmlns="http://www.w3.org/2000/svg" width="225" height="225" style="transform: rotate(-15deg); transform-origin: 50% 50%;">

          <text xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" fill="rgba(143, 149, 158, 0.1)" font-weight="normal" style="font-size: 14px;" font-family="'PingFang SC', 'Microsoft YaHei',   'Helvetica Neue', Helvetica, Arial, sans-serif">

              凌晨 8888

          </text>

</svg>

<div class="TIAWBFTROSIDWYKTTIAW2 _3K2NEN-3OMd-r0cfD5r0Ov"></div>



._3K2NEN-3OMd-r0cfD5r0Ov {

    margin: auto;

    right: 0;

    bottom: 0;

}

<style>

.TIAWBFTROSIDWYKTTIAW2 {

    background-image: url(data:image/svg+xml;base64,???)

    background-repeat: repeat, repeat;

    background-position: 112.5px 112.5px, 0 0;

}

SVG to Base64

https://base64.guru/converter/encode/text



data:image/svg+xml;base64,

demo



<svg xmlns="http://www.w3.org/2000/svg" width="225" height="225" style="transform: rotate(-15deg); transform-origin: 50% 50%;">

    <text xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" fill="rgba(143, 149, 158, 0.1)" font-weight="normal" style="font-size: 14px;" font-family="'PingFang SC', 'Microsoft YaHei',   'Helvetica Neue', Helvetica, Arial, sans-serif">凌晨 8888</text>

</svg>

data:image/svg+xml;base64, + Base64(SVG DOM String)

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjUiIGhlaWdodD0iMjI1IiBzdHlsZT0idHJhbnNmb3JtOiByb3RhdGUoLTE1ZGVnKTsgdHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTsiPg0KICAgIDx0ZXh0IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iNTAlIiB5PSI1MCUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSJyZ2JhKDE0MywgMTQ5LCAxNTgsIDAuMSkiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIHN0eWxlPSJmb250LXNpemU6IDE0cHg7IiBmb250LWZhbWlseT0iJ1BpbmdGYW5nIFNDJywgJ01pY3Jvc29mdCBZYUhlaScsICAgJ0hlbHZldGljYSBOZXVlJywgSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZiI+5YeM5pmoIDg4ODg8L3RleHQ+DQo8L3N2Zz4NCg==

https://codepen.io/xgqfrms/pen/PoGdYyE

See the Pen SVG background watermark by xgqfrms
(@xgqfrms) on CodePen.