web.jpeg

圖片的認(rèn)知

• 分為：位圖和矢量圖
• 位圖
  • 位圖是有一個(gè)個(gè)小方塊組合的圖片,一個(gè)小方塊代表1px
  • 比如：jpg,png,gif等都是位圖
  • 優(yōu)點(diǎn)：色彩逼真私爷，缺點(diǎn)是：圖片放大容易失真
• 矢量圖
  • 矢量圖是用XML格式定義, 通過(guò)各種「路徑」和「填充顏色」來(lái)描述渲染的的圖片
  • 優(yōu)點(diǎn):放大不失真，缺點(diǎn):繪制起來(lái)比較復(fù)雜

SVG 標(biāo)簽繪制矢量圖

• SVG英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖
• 默認(rèn)是有寬度（300）和高度(150)的
• 可以通過(guò)css樣式設(shè)置寬高搜骡，也可以通過(guò)行內(nèi)樣式設(shè)置

SVG 繪制直線

• x1/y1設(shè)置起點(diǎn)
• x2/y2設(shè)置終點(diǎn)

<svg>
    <line x1="100" y1="100" x2="100" y2="400" stroke="#ccc"></line>
</svg>

SVG 繪制直線折線

• polyline
• points:設(shè)置所有的點(diǎn)

<svg>
 <polyline points="100 100 300 100 300 300" stroke="#000" fill="none"></polyline>
</svg>

SVG 繪制多邊形

• polygon 的標(biāo)簽

<svg>
 <polygon points="100 100 300 100 300 300" stroke="red"></polygon>
</svg>

SVG 繪制矩形

• rect
• x/y 是秒點(diǎn)的位置
• width/height 寬度和高度
• fill:填充的顏色
• stroke:描邊顏色
• stroke-width:描邊的寬度
• rx/ry設(shè)置圓角半徑

<svg>
  <rect x="100" y="100" width="100" height="100" fill="red" stroke="blue" stroke-width="10" rx="10"></rect>
</svg>

SVG 繪制圓和橢圓

• 根據(jù)繪制矩形的rx/ry的修改
• 圓形

<svg>
    <rect x="100" y="100" width="100" height="100" fill="red" stroke="blue"  rx="50"></rect>
</svg>

• circle 繪制圓
• ellipse 繪制橢圓

<svg>
  
  
    <!--繪制圓-->
    <circle cx="100" cy="100" r="50"></circle>

    <!--繪制橢圓-->
    <ellipse cx="200" cy="200" rx="100"  ry="50"></ellipse>


</svg>

SVG中一些常用的屬性
fill: 修改填充顏色
fill-opacity: 0~1 設(shè)置填充顏色的透明度
stroke: 修改描邊顏色
stroke-width: 修改描邊寬度
stroke-opacity: 0~1 設(shè)置描邊透明度
stroke-linecap: butt/square/round 設(shè)置線段兩端帽子
stroke-dasharray: 設(shè)置虛線
stroke-dashoffset:設(shè)置虛線偏移位
stroke-linejoin: miter/bevel/round設(shè)置折線轉(zhuǎn)角樣式

SVG繪制路徑

• SVG的路徑
  • M = 起點(diǎn)
  • L = 其他點(diǎn)
  • H = 和上一個(gè)點(diǎn)Y相等
  • V = 和上一個(gè)點(diǎn)X相等
  • Z = 關(guān)閉當(dāng)前路徑

<svg>

    <!--繪制路徑直線-->
  <path d="M 100 100 L 200 100" stroke="red"></path>

    <!--繪制折線-->
    <path d="M 50 50 L 300 100 L 300 300" stroke="blue" fill="none"></path>

    <!-- 關(guān)閉路徑-->
    <path d="M 70 70 L 210 200 L 210 70 Z" stroke="red" fill="none"></path>

    <!---->

    <path d="M 50 250 H 200 V 70 Z" stroke="blue" fill="none"></path>

</svg>

image.png

SVG繪制圓弧

A(rx, ry, xr, laf, sf, x, y) 從當(dāng)前位置繪制弧線到指定位置

• rx:圓弧X半徑
• ry:圓弧Y半徑
• xr:弧線所在的橢圓旋轉(zhuǎn)的角度
• laf:是否選擇弧長(zhǎng)較長(zhǎng)的一段 0是較短 1是較長(zhǎng)
• sf:是否是順時(shí)針 0是逆時(shí)針 1是順時(shí)針
• x/y: 弧的終點(diǎn)位置

<svg width="500" height="500">

    
    <path d="M 100 100 A 100 50 0 1 0 200 150" stroke="red" fill="none"></path>

</svg>

image.png

SVG 貝塞爾曲線

Q(x1, y1, x, y) 從當(dāng)前位置繪制二階貝塞爾曲線到指定位置

• x1,y1: 控制點(diǎn)位置
• x,y: 終點(diǎn)位置

C = curveto

• C(x1, y1, x2, y2, x, y) 從當(dāng)前位置繪制三階貝塞爾曲線到指定位置
• x1, y1: 控制點(diǎn)1位置
• x2, y2: 控制點(diǎn)2位置
• x, y: 終點(diǎn)位置

<svg width="500" height="500">

    <!--二階貝塞爾-->
    <path d="M 100 300 Q 150 50 300 300" stroke="red" stroke-width="5" fill="none"></path>

    <!--三界貝塞爾-->

    <path d="M100 140 C 100 50 250 150 260 100" stroke="red" stroke-width="5" fill="none"></path>
</svg>

image.png

SVG繪制文字

svg是以做下角作為參考,默認(rèn)的文字的基線和指定的位置對(duì)齊

• text標(biāo)簽
  • x/y 指定繪制文字的開始位置
  • style:文字的樣式
  • text-anchor: 指定文字水平方向?qū)R方式
  • dominant-baseline: 指定文字垂直方向?qū)R方式
  • dx/dy: 相對(duì)于前一個(gè)文字位置, 未設(shè)置位置的文字會(huì)繼承前一個(gè)文字

<svg width="500" height="500">
    <line x1="250" y1="0" x2="250" y2="500" stroke="red" ></line>
    <line x1="0" y1="250" x2="500" y2="250" stroke="red" ></line>

    <text x="250" y="250" style="font-size: 40px;" text-anchor="start" dx="10 20">掠食龍</text>
    <!--
     text-anchor: 是以位置點(diǎn) 為參考
     start:文字開始的位置在 繪制點(diǎn)
     end：文字結(jié)束的位置在 繪制點(diǎn)
     middle:文字中的位置 在繪制點(diǎn)

    -->

</svg>

image.png

SVG繪制文字路徑

• defs定義一個(gè) 不可見(jiàn)的 模塊區(qū)域
• textPath 標(biāo)簽是 上面的文字 會(huì)根據(jù)defs里面定義的路徑繪制

<svg width="500" height="500">
    <!--定義文本的繪制路徑-->
    <defs>
        <path id="textPath" d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>

    </defs>>
    <!--繪制文字-->
    <text>
        <!--文字路勁-->
        <textPath xlink:href="#textPath">這是一個(gè)繪制的文字按照路徑繪制123</textPath>
    </text>



</svg>

image.png

SVG繪制超鏈接

<svg width="500" height="500" >
    <a xlink: xlink:title="官網(wǎng)" target="_blank">
        <!--文字-->
        <text x="100" y="100">百度爺爺</text>
        <!--圖形-->
        <circle cx="200" cy="200" r="50" fill="red" ></circle>

    </a>
</svg>

SVG線性漸變

• linearGradient 線性漸變
  • x1/y1:漸變范圍開始位置
  • x2/y2: 漸變范圍結(jié)束位置
  • 默認(rèn)情況下是按照當(dāng)前元素的百分比
    不過(guò)可以通過(guò) gradientUnits 修改
  • gradientUnits="objectBoundingBox" 默認(rèn)
  • gradientUnits="userSpaceOnUse" 使用像素

<svg width="500" height="500">

    <!--百分比漸變-->
    <linearGradient id="myline" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="red"></stop>
        <stop offset="1" stop-color="green"></stop>
    </linearGradient>

    <!--訪問(wèn)-->
    <rect x="100" y="100" width="300" height="100" fill="url(#myline)"></rect>


    <!--像素漸變-->

    <linearGradient id="mypx" x1="200" y1="200" x2="400" y2="200" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="red"></stop>
        <stop offset="1" stop-color="green"></stop>
    </linearGradient>

    <!--繪制矩形-->
    <rect x="100" y="260" width="300" height="100" fill="url(#mypx)"></rect>



</svg>

image.png

SVG繪制圖片

• xlink:href 訪問(wèn)圖片的地址

<svg>
    <image xlink:href="images/1.gif"></image>
</svg>