以下演示效果配合 使用svg创建动态水印内容 食用更好理解~

demo-1

普通的svg静态水印

这里是 我将要打码的内容

点击事件也被禁止了

demo-2

普通的水印覆盖，z-index 覆盖在上层

这里是 我将要打码的内容

点击事件也被禁止了

demo-3

基于demo-2 ，添加 css pointer-events: none;

这里是 我将要打码的内容

我也可以被点击了

demo-4

点击这里切换水印

这里是 我将要打码的内容

我也可以被点击了

demo-5

这里的水印就牛逼了，你是删不掉的！不信打开控制台试下。不过前端是没有绝对的安全的，删不掉是不可能的，只能说多加防范把！
如果真的追求更严谨的水印，建议看看 https://github.com/saucxs/watermark-dom

这里是 我将要打码的内容

我也可以被点击了