SVG學習（三）

時間  2019-11-05
標籤 svg 學習 简体版
原文   原文鏈接

閱讀目錄css

一：在SVG中使用樣式html

SVG容許咱們使用四種方式指定圖形使用樣式：內聯樣式、內部樣式表、外部樣式表及表現屬性。在SVG中使用樣式，咱們簡單的來了解下便可。svg

1. 內聯樣式測試

<circle cx="20" cy="20" r="10" style="stroke:black;stroke-width:2;fill:blue;fill-opacity:0.6;"></circle>

如上就是內聯樣式，和咱們的css中其實就是同樣的，簡單的瞭解下概念就能夠了。編碼

2. 內部樣式表spa

代碼以下所示：3d

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <style type="text/css">
    <![CDATA[
      circle {
        stroke: black;
        stroke-width: 2;
        fill: blue;
        fill-opacity: 5 3;
      }
    ]]>
  </style>
  <circle cx="20" cy="20" r="10"></circle>
  <circle cx="40" cy="40" r="20"></circle>
</svg>

如上就是內部樣式表了。code

3. 外部樣式表xml

就是和咱們的css外鏈是一個樣的，好比index.html代碼以下：htm

<!DOCTYPE html>
<html>
<head>
  <title>svg</title>
  <meta charset="utf-8">
  <link href="./index.css" rel="stylesheet" />
</head>
<body>
  <svg
    style="border: 1px solid red;" 
    width="400" 
    height="200" 
    viewBox="0,0,400,200"
  >
    <circle cx="20" cy="20" r="10"></circle>
    <circle cx="40" cy="40" r="20"></circle>
  </svg>
</body>
</html>

4. 表現屬性

咱們以前使用樣式都是使用style的內聯樣式來編碼的，以下就是內聯樣式來寫的，以下代碼：

<circle cx="20" cy="20" r="10" style="fill:red;stroke:black;stroke-width:2;"></circle>

可是咱們也能夠把樣式當作屬性來編寫，好比以下：

<circle cx="50" cy="40" r="20" fill="red" stroke="black" stroke-width="2"></circle>

如上就是對上面的效果是同樣的，可是這樣作也是很差的，由於它混合告終構和表現的分離，因此咱們這邊也只是介紹及瞭解下有這種方法來作這件事，而且屬性的優先級它是小於內聯樣式的優先級的，以下代碼所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <circle cx="20" cy="20" r="10" style="fill:red;stroke:black;stroke-width:2;"></circle>
  <circle cx="50" cy="40" r="20" fill="red" stroke="black" stroke-width="2"></circle>
  <circle 
    cx="80" 
    cy="80" 
    r="20" 
    fill="red" 
    stroke="black" 
    stroke-width="2"
    style="fill:blue;stroke:red;stroke-width:2;"
  ></circle>
</svg>

效果以下所示：

如上咱們能夠看到第三個 circle 標籤，咱們給它定義了使用表現屬性填充顏色爲紅色了，可是咱們使用了style標籤訂義了 顏色爲藍色，所以咱們上面能夠看到 填充的顏色爲藍色。而且咱們的內聯樣式或外表樣式表的優先級都比咱們的表現屬性的優先級更高。

二：分組和引用對象

1. 理解 <g> 元素

<g> 元素的做用是：將其全部的子元素做爲一個組合，固然它還有一個惟一的id做爲名稱，每一個組合它還能夠擁有本身的<title>和<desc>來提供基於xml應用程序識別。它其實就是 'group' 的簡寫，用來分組的，它能把多個元素放在一個組裏。以下代碼所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <g id="man" style="fill:none;stroke: black;">
    <desc>我是來測試的</desc>
    <rect x="6" y="50" width="60" height="60"></rect>
    <polyline points="6 50, 36 9, 66 50"></polyline>
    <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
  </g>
</svg>

效果以下所示：

2. 理解 <use> 元素

<use>標記的做用是能從svg文檔內部取出一個節點，克隆它，並把它克隆到其餘的地方。如上咱們使用了 <g>標籤繪了一個圖形，如今咱們使用 <use>元素來克隆一份到其餘的地方去，代碼以下：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <g id="man" style="fill:none;stroke: black;">
    <desc>我是來測試的</desc>
    <rect x="6" y="50" width="60" height="60"></rect>
    <polyline points="6 50, 36 9, 66 50"></polyline>
    <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
  </g>
  <use xlink:href="#man" x="170" y="60"></use>
</svg>

效果以下所示：

3. 理解 <defs> 元素

svg的<defs>元素用於預約義一個元素使其可以在svg圖像中重複使用，好比咱們能夠將一些圖形制做成一個組，而且使用defs元素來包裹它，而後咱們就能夠在svg圖像中將它當作簡單圖形來重複使用。

使用 <defs>元素相對於直接使用<g>和<use>元素的好處有：

1. 使用<use>元素複製該圖形的時候，並不能改變該元素的樣式，好比上面的代碼，咱們不能給他添加其餘的顏色：以下代碼：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <g id="man" style="fill:none;stroke: black;">
    <desc>我是來測試的</desc>
    <rect x="6" y="50" width="60" height="60"></rect>
    <polyline points="6 50, 36 9, 66 50"></polyline>
    <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
  </g>
  <use xlink:href="#man" x="170" y="60" style="file:blue;"></use>
</svg>

如上代碼，咱們使用use元素複製了一份g元素的內容，而後咱們給他填充顏色並無生效，效果仍是和上面是同樣的。

以下代碼使用方式以下：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <defs>
    <g id="man">
      <desc>我是來測試的</desc>
      <rect x="6" y="50" width="60" height="60"></rect>
      <polyline points="6 50, 36 9, 66 50"></polyline>
      <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
    </g>
  </defs>
  <use xlink:href="#man" x="70" y="20" style="fill:red;stroke: black;"></use>
  <use xlink:href="#man" x="170" y="60" style="fill:blue;stroke: white;"></use>
</svg>

效果以下圖所示：

如上咱們能夠看到，其實<defs> 真正的做用是 定義一組元素在頁面上，可是使用defs元素包圍後，該元素不會在頁面上顯示的，只有當咱們使用 <use>元素來複制的時候纔會在頁面上顯示，而且咱們使用 <defs>元素包裹的<g>元素不要使用任何樣式，等咱們真正使用<use>元素複製完成後再去定義本身想要的樣式，也就是說咱們使用 <defs>定義了不少組模板，當咱們使用 <use>元素複製了該模板的時候纔會在頁面上真正顯示出來。

4. 理解<symbol>元素

<symbol>元素提供了另外一種組合元素的方式，它和<g>元素不一樣的是，<symbol>元素永遠不會顯示出來，所以咱們有時候能夠不把它放在<defs>規範內部。<symbol>元素還能夠指定viewBox和preserveAspectRatio屬性，咱們經過給<use>元素添加width和height屬性就可讓symbol適配視口大小。

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <symbol id="circle">
    <circle cx="50" cy="50" r="30"></circle>
  </symbol>
  <use xlink:href="#circle" style="fill:red;"></use>
  <use xlink:href="#circle" style="fill:blue" x="50" y="100"></use>
</svg>

以下所示：

注意：咱們無論使用<defs>元素也好，仍是使用 <symbol>也好，咱們不能再他們內部使用樣式的，不然的話咱們使用<use>元素是改變不了樣式的，由於它們內部自身的樣式優先級會更高，好比以下代碼，它顯示的仍是自己的樣式的，好比黑色，以下代碼所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <symbol id="circle">
    <circle cx="50" cy="50" r="30" style="fill:black;"></circle>
  </symbol>
  <use xlink:href="#circle" style="fill:red;"></use>
  <use xlink:href="#circle" style="fill:blue" x="50" y="100"></use>
</svg>

效果以下所示：

上面咱們也已經提到 <symbol>元素可以建立本身的視窗，所以它可以使用 viewBox和preserveAspectRatio屬性了，以下代碼所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <symbol id="symbol" viewBox="0 0 250 250">
    <rect x="10" y="10" width="100" height="100" />
  </symbol>
  <use id="ant"
   fill="red"
   xlink:href="#symbol" />
</svg>

效果以下所示：

5. 理解<image>元素

在svg中，咱們可使用<image>元素來包含一個完整的SVG或柵格文件，若是咱們包含的是一個svg文件的話，其視口會基於引用文件
的x, y, width 和 height 屬性來創建。若是咱們包含的是一個柵格文件的話，它會被縮放至以適配該屬性指定的矩形。

以下代碼所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <rect x="10" y="10" height="130" width="500" style="fill: #333333"/>
  <image x="20" y="20" width="150" height="46"
  xlink:href="http://img.htmleaf.com/1506/logo.png" />
</svg>

效果以下所示：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程