SVG_3_矢量圖___

知識點梳理：

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"引入圖片

 

最終效果圖