SVG學習

svg

MDN較為詳細

地址：https://developer.mozilla.org/zh-CN/docs/Web/SVG

svg: scalable vector graphics 可縮放矢量圖

  1. 該圖片使用代碼書寫而成
  2. 縮放不會失幀
  3. 內(nèi)容輕量

如何使用

svg 可以嵌入瀏覽器，也可以單獨成為一個文件

xml語言，svg使用該語言定義

書寫svg

基本格式舉例：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="50" y="50" fill="red" stroke="black" stroke-width="5"  />
    <circle cx="250" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />
    <ellipse rx="50" ry="100" cx="400" cy="150" fill="red" stroke="black" stroke-width="5"/>
    <line x1="47.5" x2="400" y1="50" y2="50" stroke="black" stroke-width="10"/>
    <polyline points="50 150 250 150 400 250" fill="none" stroke="black" stroke-width="10" />
    <polygon points="100 500 200 250 300 500 50 350 350 350  " fill="red" stroke="black" stroke-width="10" />
</svg>

fill，填充顏色，取值transparent（透明）
stroke，邊框
stroke-width，邊框?qū)挾?/p>

矩形

<rect width="100" height="100" x="50" y="50" fill="red" stroke="black" stroke-width="5"  />

寬，高，x坐標，y坐標，填充色，邊框，邊框?qū)挾?/p>

圓形

<circle cx="250" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />

cx圓心X坐標

cy圓心y坐標

橢圓

<ellipse rx="50" ry="100" cx="400" cy="150" fill="red" stroke="black" stroke-width="5"/>

rx橫向橢圓半徑

ry縱向橢圓半徑

線條

<line x1="47.5" x2="400" y1="50" y2="50" stroke="black" stroke-width="10"/>

由兩個坐標連接

折線

<polyline points="50 150 250 150 400 250" fill="none" stroke="black" stroke-width="10" />

由坐標依次連接

多邊形

畫五角星

<polygon points="100 500 200 250 300 500 50 350 350 350  " fill="red" stroke="black" stroke-width="10" />

由坐標依次連接

路徑

  • M = moveto（起始坐標）
  • L = lineto（畫線）
  • H = horizontal lineto（橫線）
  • V = vertical lineto（垂直線）
  • C = curveto（曲線）
  • S = smooth curveto（平滑曲線）
  • Q = quadratic Belzier curve（二次Belzier曲線）
  • T = smooth quadratic Belzier curveto（光滑的二次貝爾齊爾曲線）
  • A = elliptical Arc（橢圓?。?/li>
  • Z = closepath（閉合）

A（橢圓）的使用：

  • rx ry
  • 順時針旋轉(zhuǎn)角度
  • 小?。?）或 大?。?）
  • 順時針（1）或 逆時針（0）
    太極圖 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A 200 200 0 0 1 250 50" fill="black"  />
    <circle cx="250" cy="150" r="30" fill="white" />
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A 200 200 0 0 0 250 50" fill="white"  />
    <circle cx="250" cy="350" r="30" fill="black" />
</svg>

stroke屬性

1、stroke

邊框色，屬性定義一條線，文本或元素輪廓顏色

2、stroke-width

文本或元素輪廓厚度

3、stroke-linecap

Stroke-linecap屬性定義線段端點的風格，
屬性值：

  • butt
  • square
  • round

stroke-linecap="square"

4、stroke-dasharray

用于創(chuàng)建虛線

舉例：stroke-dasharray="20,10,5,5,5,10"

5、stroke-opacity

屬性設置邊框的透明度，值的范圍從0到1，

舉例：stroke-opacity="1"

6、stroke-linejoin

屬性設置線條拐彎處的連接方式，屬性值：

  • miter
  • round
  • bevel

舉例：stroke-linejoin="bevel"

線性漸變——linearGradient

<linearGradient> 標簽必須嵌套在 <defs> 的內(nèi)部。<defs> 標簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。

  • 當 y1 和 y2 相等，而 x1 和 x2 不同時，可創(chuàng)建水平漸變
  • 當 x1 和 x2 相等，而 y1 和 y2 不同時，可創(chuàng)建垂直漸變
  • 當 x1 和 x2 不同，且 y1 和 y2 不同時，可創(chuàng)建角形漸變

<linearGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱

fill:url(#red_green) fill="url(#red_green)"屬性把 需要漸變的圖形元素鏈接到此漸變

<linearGradient> 標簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置

漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規(guī)定。offset 屬性用來定義漸變的開始和結束位置。

<!--五角星漸變?nèi)旧?->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500" style="background:#999" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <polygon points="150 350 250 100 350 350 100 200 400 200  " style="fill:url(#red_green)" />
    <defs>
        <linearGradient id="red_green" x1="0%" y1="100%" x2="0%" y2="30%">
            <stop offset="0%" stop-color="red" stop-opacity="1"/>
            <stop offset="100%" stop-color="green" stop-opacity="1"/>
        </linearGradient>
    </defs>
</svg>

<!-- 正方形漸變 -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="150" y="150" width="200" height="200" style="fill:url(#blue_red)" />
    <defs>
        <linearGradient id="blue_red" x1="0%" y1="10%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="blue" stop-opacity="1">
            </stop>
            <stop offset="100%" stop-color="red" stop-opacity="1">
            </stop>
        </linearGradient>
    </defs>
</svg>

放射性漸變——radialGradient

<radialGradient> 標簽必須嵌套在 <defs> 中。<defs> 標簽是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義

cx、cy 和 r 屬性定義外圈，fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成

  • r是外圈的半徑，（cx，cy）為外圓圓心坐標
  • （fx，fy）為內(nèi)圓圓心坐標

每種顏色通過一個 <stop> 標簽來規(guī)定。offset 屬性用來定義漸變的開始和結束位置。

舉例：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="red_green" cx="100%" cy="10%" r="70%" fx="50%" fy="50%" >
            <stop offset="0%" stop-color="red" stop-opacity="1" ></stop>
            <stop offset="100%" stop-color="green" stop-opacity="1" ></stop>
        </radialGradient>
    </defs>
    <rect width="200" height="200" x="150" y="150" style="fill:url(#red_green)" />
</svg>

svg濾鏡

在 SVG 中，可用的濾鏡有：

  • feBlend

  • feColorMatrix

  • feComponentTransfer

  • feComposite

  • feConvolveMatrix

  • feDiffuseLighting

  • feDisplacementMap

  • feFlood

  • feGaussianBlur——創(chuàng)建模糊效果

  • feImage

  • feMerge

  • feMorphology

  • feOffset——創(chuàng)建模糊效果

  • feSpecularLighting

  • feTile

  • feTurbulence

  • feDistantLight

  • fePointLight

  • feSpotLight

必須在 <defs> 標簽中定義 SVG 濾鏡

<filter> 標簽必須嵌套在 <defs> 標簽內(nèi)

  • <filter> 標簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
  • filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字符
  • 濾鏡效果是通過 <feGaussianBlur> 標簽進行定義的。fe 后綴可用于所有的濾鏡
  • <feGaussianBlur> 標簽的 stdDeviation 屬性可定義模糊的程度
  • in="SourceGraphic" 這個部分定義了由整個圖像創(chuàng)建效果
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • SVG 學習筆記 SVG是什么 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) S...
    Penn_Xu閱讀 1,119評論 0贊 1
  • SVG概述 SVG : 可縮放矢量圖形,使用 XML 格式定義圖像。 SVG in HTML 直接嵌入HTML文檔...
    datasun閱讀 1,039評論 0贊 0
  • 一.什么是SVG？ SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來定義...
    nightZing閱讀 17,518評論 11贊 62
  • SVG學習筆記 簡介 SVG使用XML來描述二維圖形和繪圖程序的語言。 SVG形狀 SVG在HTML頁面 SVG ...
    EL_PSY_CONGROO閱讀 321評論 0贊 0
  • 什么是SVG？ SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用...
    hojun閱讀 1,005評論 0贊 5

友情鏈接更多精彩內(nèi)容