使用SVG滤镜模拟下划线实例页面

效果：

我是一段文字，链接地址transparent是下划实线。

我是一段文字，字号更大，链接地址transparent是下划实线。

代码：

CSS代码：

a {
    -webkit-filter: url('#svg-underline');
    filter: url('#svg-underline');
    text-decoration: none;
}

HTML代码：

<svg class="out">
  <filter id="svg-underline" primitiveUnits="objectBoundingBox">
    <!-- 原图文基础上水平垂直方向一点点扩展并存储到新的层上 -->
    <feMorphology in="SourceGraphic" operator="dilate" radius="0.0075 0.05" result="outline"></feMorphology>
    <!-- 一个蓝色矩形，高度3%然后宽度100%，位置稍微往下一点 -->
    <feFlood flood-color="#34538b" width="1" height="0.03" x="0" y="0.9" result="underline"></feFlood>
    <!-- 遮罩蓝色矩形，这样，文字重合部分边缘会镂空 -->
    <feComposite in="underline" in2="outline" operator="out" result="underline"></feComposite>
    <!-- 滤镜走起来 -->
    <feMerge>
      <feMergeNode in="underline"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
</svg>

<p>我是一段文字，<a href>链接地址transparent</a>是下划实线。</p>
<p><big>我是一段文字，字号更大，<a href>链接地址transparent</a>是下划实线。</big></p>