svg

  1. SVG 簡介
    SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。
    SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
    SVG 用來定義用于網絡的基于矢量的圖形
    SVG 使用 XML 格式定義圖形
    SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
    SVG 是萬維網聯盟的標準
    SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

  2. SVG 在 HTML 頁面
    <embed>、<object> 或者 <iframe>
    <embed src="circle1.svg" type="image/svg+xml" />
    <object data="circle1.svg" type="image/svg+xml"></object>
    <iframe src="circle1.svg"></iframe>
    在html里面直接使用
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>

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

  4. 矩形
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
    style 屬性用來定義 CSS 屬性
    CSS 的 fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進制值)
    CSS 的 stroke-width 屬性定義矩形邊框的寬度
    CSS 的 stroke 屬性定義矩形邊框的顏色<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/>x 屬性定義矩形的左側位置(例如,x="0" 定義矩形到瀏覽器窗口左側的距離是 0px) y 屬性定義矩形的頂端位置(例如,y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px) CSS 的 fill-opacity 屬性定義填充顏色透明度(合法的范圍是:0 - 1) CSS 的 stroke-opacity 屬性定義輪廓顏色的透明度(合法的范圍是:0 - 1)<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>opacity 屬性用于定義了元素的透明值 (范圍: 0 到 1)。<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>`
    rx 和 ry 屬性可使矩形產生圓角。

  5. 圓形
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
    cx和cy屬性定義圓點的x和y坐標。如果省略cx和cy,圓的中心會被設置為(0, 0)
    r屬性定義圓的半徑

  6. 橢圓
    <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
    CX屬性定義的橢圓中心的x坐標
    CY屬性定義的橢圓中心的y坐標
    RX屬性定義的水平半徑
    RY屬性定義的垂直半徑

  7. 直線
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
    x1 屬性在 x 軸定義線條的開始
    y1 屬性在 y 軸定義線條的開始
    x2 屬性在 x 軸定義線條的結束
    y2 屬性在 y 軸定義線條的結束

  8. 多邊形
    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
    points 屬性定義多邊形每個角的 x 和 y 坐標

  9. 曲線
    <polyline> 元素是用于創建任何只有直線的形狀
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

  10. 路徑
    <path>元素用于定義一個路徑。
    M = moveto 移動到的點的x軸和y軸的坐標
    L = lineto 需要兩個參數,分別是一個點的x軸和y軸坐標,L命令將會在當前位置和新位置(L前面畫筆所在的點)之間畫一條線段。
    H = horizontal lineto 繪制平行線
    V = vertical lineto 繪制垂直線
    C = curveto 三次貝塞爾曲線C
    S = smooth curveto
    Q = quadratic Bézier curve 二次貝塞爾曲線Q。
    T = smooth quadratic Bézier curveto
    A = elliptical Arc 弧形
    Z = closepath 從當前點畫一條直線到路徑的起點(閉合)

  11. 文本
    <text x="0" y="15" fill="red">I love SVG</text>
    <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
    <a xlink: target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
    </a>

  12. Stroke 屬性
    Stroke屬性定義一條線,文本或元素輪廓顏色:
    stroke- width屬性定義了一條線,文本或元素輪廓厚度:

  13. 濾鏡

  1. 模糊效果

    <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濾鏡定義在<defs>元素中

  1. 陰影
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • @(HTML5)[canvas與SVG] [TOC] 十一 、SVG HTML體系中,最常用的繪制矢量圖的技術是S...
    踏浪free閱讀 4,598評論 0 2
  • 一.什么是SVG? SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來定義...
    nightZing閱讀 17,099評論 11 62
  • 什么是SVG? SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用...
    hojun閱讀 915評論 0 5
  • SVG 學習筆記 SVG是什么 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) S...
    Penn_Xu閱讀 1,002評論 0 1
  • 作者: 阮一峰www.ruanyifeng.com/blog/2018/08/svg.html 一、概述 SVG ...
    grain先森閱讀 2,834評論 0 12