antdesign Watermark 使用svg

Ant Design Watermark 组件使用 SVG 来生成水印。具体实现方式是在组件中定义了一个 SVG 图形，然后利用 CSS 对其进行样式调整和定位，最终生成水印效果。

你可以通过 Watermark 组件的 props 来设置水印的文本、字体大小、颜色等属性，也可以通过 CSS 样式来自定义水印的样式和位置。

以下是一个基本的使用示例：

import { Watermark } from 'antd';

function MyComponent() {
  return (
    <div>
      <Watermark
        text="My Watermark"
        fontColor="rgba(0, 0, 0, 0.15)"
        fontSize="16px"
        zIndex={9999}
      />
      <p>这是我的组件内容</p>
    </div>
  );
}

在上面的代码中，我们将 Watermark 组件放在一个 div 容器中，设置了水印的文本、字体颜色、字体大小和层级，然后在组件后面输出一段普通的文本内容。运行后，我们会发现页面上出现了一个带有水印的图案，覆盖在了组件内容上方。