SVG_3_矢量图_<g>_<text>_<image>

知识点梳理：

1，<g>标签：分组标签、容器标签；
2，<text>文字标签，文字水平垂直居中；
3，style="cursor:pointer":控制显示手型；
4，<image>标签：通过xlink:href=""引用图片；

 

下面逐一介绍：

• <g>标签

        <g>标签是一个容器标签，用来整合多个元素标签，因为svg复杂图形有很多个图形，组合后，统一管理，非常方便。

• <text>标签

          垂直居中：文字大小的一半-2+y（这个y是需要对应居中控件的y）

          原因：因为文字并不是首字左下角，而是文字左下角下沉了一小部分。文字说明不好表达，看图，中心店其实不在文字左下角。

水平居中：<text>有text-anchor="middle" 

 

下面是文字居中后的效果

•  

<!--  style="cursor: pointer 这个属性是为了，当鼠标移到控件上来时，显示手型-->  <g style="cursor: pointer">      <circle r="120" transform="translate(300,300)" fill="transparent" stroke="aqua" stroke-width="10"></circle>    <image x="250" y="200" width="100" height="100" xlink:href="../ic_launcher.png"></image>    <text transform="translate(300,308)" font-size="20" text-anchor="middle" >Xi说SVG</text>  </g>

• style="cursor: pointer"

        这个属性是为了，当鼠标移到控件上来时，显示手型

        这个效果可自行感受，不好截图。

 

• <image>标签

  通过xlink:href="../tx.png"引入图片

 

最终效果图