go 获取 html 标签中的文本_HTML中的新标签一

        早上，浏览gitlab网站时，看到了一条颜色渐变的折线图。我想看看它使用的是什么插件，F12之后，发现居然是一组html标签。在我的印象里，html和xml文件只是将内容堆砌出来，并没有装饰的作用。因此，我决定记录下新认识的html标签。

        今天找到的两个样式展示如下：

        样式一

样式二

这两个样式，使用的是同一个标签，百度之后发现SVG 是使用 XML 来描述二维图形和绘图程序的语言，具体内容好像还挺多的，具体可以参考：https://www.w3school.com.cn/svg/svg_intro.asp。这里的重点是标签在HTML中的使用。它的作用，就是将svg文件嵌入html文件中。也就是说在html，在这个标签里，可以使用svg语法。

        样式一，代码如下：

style="stroke: none; fill: url(#gradient-294659306); 

mask: url(#sparkline-294659306)">

        说明： 标签定义一个宽155像素，高30像素的画框，

                   svg 渐变必须在 标签中进行定义，defs 是 definitions 的缩写，

                    标签定义svg渐变线，id属性，给渐变定义唯一的名称，另外，x1,x2,y1,y2四个属性，则定义了颜色渐变方向。详情如下：

• 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变

• 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变

• 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

                    标签用以设置渐变的颜色，其中 offset属性，用来指定渐变色的起始位置，本例结合起来，就是颜色自下往上，逐渐变换，变得范围分别是0~10%(由无色变成#9be9a8)；10%~33%(由#9be9a8变成#40c463)；33%~66%；66%~90%；90%~100%；等等，以此类推。

                     表示折线，

                    标签，表示遮罩，表示图片的遮罩，用来指定，svg的哪些内容可见，那些不可见。其中x,y标签，0表示可见，1表示不可见。

                    标签用以创建矩形，x,y属性，用来设置左右边距。style是对应的css样式其中， fill 属性定义矩形的填充， stroke表示边框的颜色，mask表示对应遮罩。

            本样式，首先在矩形rect中创建了一个自顶向下，颜色渐变的面板，然后画上折线图的遮罩，使得只有折线图部分可见，即作出这个图片

        样式二的代码如下：

     

      ...

      Sep

      Oct

      ...

      Sep

  Sun

    ...

    style="display: none;">Sat

     

       

         

            Learn how we count contributions.

       

          Less

          More

        说明：经过样式一，本例相对简单一些：

                   标签 用于把相关元素进行组合的容器元素。

                    标签，用于键入文本，并指定文本位置，

                     这个图片，使用许多小矩形堆积并设置了相应文本的位置。

        另外，与css样式一样，html中同样支持引入外部的svg文件，引入方法有三种：

        1、借助标签；

type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

        2、借助标签；

type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

        3、借助

        最后，慢慢来吧，大不了就是每天学习一个知识点，不要害怕慢。先养成这样的习惯再说吧。