通过 SVG 而不是 JS 保护您的电子邮件地址
在网页上公布的电子邮件地址通常需要加以保护，以防垃圾邮件机器人窃取。
传统的电子邮件保护技术结合使用 HTML、CSS 和 JS，但每种方法都有各自的优缺点。
一般来说，涉及 JS 的方法往往比基于 HTML 和/或 CSS 的方法更复杂。
但缺点是，JS 会成为页面不可避免的依赖。
有一种观点认为，虽然 JS 可以增强页面的功能，但理想情况下，我们应该希望即使关闭 JavaScript，页面上的所有基本功能也能正常工作。
本页详细介绍的技术采用的方法完全不同于基于 CSS、JS、CSS + JS 等的传统电子邮件保护技术。
因为这种技术是基于 SVG 的。
注意：此技术和其他任何利用前端技术的电子邮件保护技术都无法保护您发布的电子邮件地址不被最狡猾、最复杂的垃圾邮件机器人获取。但是，与许多基于 JS 的电子邮件保护技术一样，它还是可以保护您的电子邮件不被许多不成熟的收集者窃取，并使您的电子邮件不被任何简单或业余的脚本成功隐藏，这些脚本会在网上搜索，试图复制他们发现的任何未受保护的电子邮件地址。
基于 SVG 的电子邮件地址保护方法的三大优势
1.可在禁止 JavaScript 的情况下工作
这种基于 SVG 的电子邮件保护方法的主要优点是无需 JavaScript。
因此，即使人类访客关闭了 JavaScript，页面上显示的电子邮件地址仍然可用、可访问和受保护，同时仍然安全，不会被垃圾邮件机器人发现。
2.允许标准 mailto: 链接
与其他无需使用 JavaScript 的方法（例如，通过插入不可见的 HTML 注释或插入可见元素并随后通过 CSS 隐藏它们来混淆电子邮件地址）不同，这种基于 SVG 的方法允许使用标准的 mailto: 链接。问题在于：mailto: 链接存在于外部 SVG 文档中，而不是引用的 HTML 文档中。
3.像图片一样隐藏内容；像文本一样可复制
第三个优点是，嵌入式 SVG 与图像类似，但不是图像。
作为嵌入超文本文档中的被替换元素，SVGs 可以像图片一样有效地隐藏电子邮件地址，使其不被垃圾邮件机器人发现。
但严格来说，SVGs 是图形文档，而不是真正的图像。
因此，与图像不同，人类访客仍然可以通过右键单击嵌入 SVG 中的 <text> 元素来复制电子邮件地址。
而传统的图像则无法做到这一点。
实现代码
下面的示例中有两个文件。
SVG 图形文件通过以下方式嵌入 HTML 超文本文件：
<object data="svg-email-protection.svg" type="image/svg+xml" /></object>
请注意，同一 SVG 图形文档可嵌入超文本一次或多次。
HTML File
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>SVG Email Protection</title>
<style>
.svg-email-protection {
width: 180px;
height: 24px;
vertical-align: middle;
}
</style>
</head>
<body>
<p>This is my email: <object class="svg-email-protection" data="svg-email-protection.svg" type="image/svg+xml"></object></p>
</body>
</html>
SVG File
<svg xmlns="http://www.w3.org/2000/svg"
lang="en-GB"
aria-labelledby="title"
viewBox="0 0 200 24">
<title id="title">Email Us!</title>
<defs>
<style type="text/css"><![CDATA[
rect {
width: 200px;
height: 24px;
fill: rgb(255, 255, 255);
}
a:focus rect,
rect:hover {
rx: 4px;
ry: 4px;
fill: rgb(0, 0, 255);
}
text {
font-size: 16px;
fill: rgb(0, 0, 255);
pointer-events: none;
}
a:focus text,
rect:hover + text {
fill: rgb(255, 255, 255);
font-weight: 900;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: underline 1px solid rgb(255, 255, 255);
text-underline-offset: 5px;
}
]]></style>
</defs>
<a href="mailto:myemail@mydomain.tld" aria-label="Email Us!">
<rect />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">myemail@mydomain.tld</text>
</a>
</svg>可访问性
与以往一样，重要的是要确保这种设置尽可能无障碍。
在此基础上，请注意 SVG 图形文件中的以下内容：
- 整个 SVG 文档都有 SVG 文档
<title>的aria-labelled，表示 call-to-action - SVG 中的锚元素（
<a>）有一个具有相同行动号召的aria标签 - 调整 SVG 的样式，当标签焦点落在锚元素（
<a>）上时，子元素<rect />和<text />都会突出显示
无障碍、无 JavaScript 技术的实例演示：
