CSS之SVG

一、學(xué)習(xí)鏈接

二、簡(jiǎn)介

【0】SVG 效果預(yù)覽

image

在線觀看

源碼地址

【1】SVG 的預(yù)定義形狀

  • 矩形 <rect>
  • 圓形 <circle>
  • 橢圓 <ellipse>
  • 線 <line>
  • 折線 <polyline>
  • 多邊形 <polygon>
  • 路徑 <path>

【2】SVG 的通用標(biāo)準(zhǔn)語(yǔ)法

  • width：寬度；
  • height：高度；
  • fill：填充色；
  • fill-opacity：填充顏色透明度；
  • stroke：邊框色；
  • stroke-widt：邊框的寬度；
  • stroke-opacity：邊框顏色的透明度；
  • stroke-linecap：不同類型的開(kāi)放路徑的終結(jié)；
  • stroke-dasharray：邊框虛線；
  • x：左側(cè)位置；
  • y：頂端位置；
  • opacity：透明值。

<br />

stroke-linecap：

<svg>
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>

<br />

stroke-dasharray：

<svg>
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>

<svg>
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

<svg>
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

【3】使用

【3.1】直接寫入html中

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>

【3.2】寫在獨(dú)立文件中，用<img>、<object>、<embed>、<iframe>等標(biāo)簽插入網(wǎng)頁(yè)。

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

【3.3】CSS 中使用 SVG

.logo {
  background: url(icon.svg);
}

【3.4】SVG 轉(zhuǎn)為 BASE64 編碼，然后作用 DATA URL 寫入網(wǎng)頁(yè)。

<img src="data:image/svg+xml;base64,[data]">

三、元素語(yǔ)法

【1】<svg>

SVG 代碼都放在頂層標(biāo)簽<svg>之中，如果只想展示 SVG 圖像的一部分，就要指定viewBox屬性。

<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

【2】<rect>矩形

<svg>
<rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>

<svg>
  <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>

【3】<circle>圓形

  • CX：圓中心的 x 坐標(biāo)；

  • CY：圓中心的 y 坐標(biāo)；

  • r：圓的半徑。

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

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

【4】<ellipse>橢圓

  • CX：圓中心的 x 坐標(biāo)；

  • CY：圓中心的 y 坐標(biāo)；

  • RX：水平半徑；

  • RY：垂直半徑。

    <svg>
    <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
    </svg>

<svg>
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

【5】<line>直線

  • x1：x 軸定義線條的開(kāi)始；
  • y1：y 軸定義線條的開(kāi)始；
  • x2：x 軸定義線條的結(jié)束；
  • y2：y 軸定義線條的結(jié)束。

<svg>
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

<svg>
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

【6】<polygon>多邊形

<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

【7】<polyline>曲線

<svg>
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:none;stroke:black;stroke-width:3" />
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"style="fill:none;stroke:red;stroke-width:4" />
</svg>

<svg>
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:none;stroke:black;stroke-width:3" />
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"style="fill:none;stroke:red;stroke-width:4" />
</svg>

【8】<path>路徑

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

<svg>
<path d="M150 0 L75 200 L225 200 Z" />
</svg>

<svg>
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

【9】<text>文本

<svg>
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>

<svg>
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

四、元素濾鏡

【1】<defs> 和 <filter>

  • <filter>元素 id 屬性定義一個(gè)濾鏡的唯一名稱；
  • <defs>標(biāo)簽用于自定義形狀

【2】<feGaussianBlur>模糊

<svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>

<svg>
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

【3】<feOffset>陰影

<svg>
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>

<svg>
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

【4】<linearGradient>線性漸變

<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

<svg>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

【5】<radialGradient>放射性漸變

<svg>
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

<svg>
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

五、更多元素標(biāo)簽

【1】<g>組

<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圓形</text>
<circle cx="50" cy="50" r="20"/>
</g>

<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">圓形</text>
    <circle cx="50" cy="50" r="20"/>
  </g>

  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

【2】<pattern>圖案填充

<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

<svg width="500" height="500">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

【3】<image>圖片

<svg viewBox="0 0 100 100" width="200" height="200">
<image xlink:href="https://wx1.sinaimg.cn/mw690/0069qZtTgy1go96k54t3lj30ru0rqx6p.jpg"
width="100%" height="100%"/>
</svg>

<svg viewBox="0 0 100 100" width="200" height="200">
  <image xlink:
    width="100%" height="100%"/>
</svg>

【4】<animate>動(dòng)畫

  • attributeName：發(fā)生動(dòng)畫效果的屬性名。

  • from：?jiǎn)未蝿?dòng)畫的初始值。

  • to：?jiǎn)未蝿?dòng)畫的結(jié)束值。

  • dur：?jiǎn)未蝿?dòng)畫的持續(xù)時(shí)間。

  • repeatCount：動(dòng)畫的循環(huán)模式。

<svg width="500px" height="100px">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>

<svg width="500px" height="100px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 前提 css 現(xiàn)在已經(jīng)支持clip-path,mask進(jìn)行圖片的裁切，從而實(shí)現(xiàn)各種特殊形狀 clip-path 和...
    時(shí)子釋閱讀 2,560評(píng)論 0贊 0
  • 接著上篇文章繼續(xù)往后講解其他知識(shí)點(diǎn)，感謝讀者們?cè)敢饣ㄙM(fèi)您們寶貴時(shí)間閱讀！ 使用濾鏡filter（也是設(shè)置陰影） <...
    lilyping閱讀 863評(píng)論 0贊 0
  • SVG 簡(jiǎn)介SVG 是使用 XML 來(lái)描述二維圖形和繪圖程序的語(yǔ)言。SVG 指可伸縮矢量圖形 (Scalable ...
    benbensheng閱讀 205評(píng)論 0贊 0
  • SVG 學(xué)習(xí)筆記 SVG是什么 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) S...
    Penn_Xu閱讀 1,002評(píng)論 0贊 1
  • <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLI...
    穆熙沐閱讀 423評(píng)論 0贊 1