SVG學習

時間  2019-12-04
標籤 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="100%" height="100%" version="1.1"
           xmlns="http://www.w3.org/2000/svg">

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

  </svg>

svg reference

https://developer.mozilla.org/en-US/docs/Web/SVGhtml

svg 簡介

SVG 有一些預約義的形狀元素，可被開發者使用和操做：segmentfault

畫布<svg>
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>
組<g>,<defs>
圖片<image>
描述<title>, <desc>
文本<text>

SVG繪製基本圖形

<svg width="100%" height="180px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <!--畫四邊形-->
    <rect x="10" y="10" width="80" height="40" rx="20" ry="10" stroke="red" fill="#EEE" stroke-width="3"></rect>
    <!-- x 爲四邊形左上角距容器元素左端的距離，y爲四邊形左上角距容器元素上端的距離 ，width爲四邊形的寬度，height爲四邊形的高度,rx爲x軸上圓角半徑，ry爲y軸上圓角半徑, stroke爲邊界的顏色，fill爲填充顏色，stroke-width爲邊界的寬度,opacity爲整個四邊形的透明度，fill-opacity爲填充顏色的透明度，stroke-opacity爲邊界的透明度，width,height,stroke,fill,stroke-opacity,fill-opacity,stroke-width等能夠放到style中-->
    <!--畫圓-->
    <circle cx="260" cy="60" r="50"></circle>
    <!-- cx爲圓心距容器元素左端的距離， cy爲圓心距容器元素上端的距離，r爲半徑 -->
    <!--畫橢圓-->
    <ellipse cx="460" cy="60" rx="80" ry="50"></ellipse>
    <!--cx爲橢圓中心點的x座標，cy爲y座標，rx是水平軸半徑，ry是垂直軸半徑-->
    <!--畫直線-->
    <line x1="560" y1="20" x2="650" y2="100" style="stroke:rgb(99,99,99);stroke-width:2"></line>
    <!--x1,y1爲起點座標， x2，y2爲終點座標-->
    <!--畫折線-->
    <polyline stroke="#000" fill="#FFF" stroke-width="1" points="660,20 680,90 720,60"></polyline>
    <!-- points是指這線上的轉折點 -->
    <!--畫多邊形-->
    <polygon stroke="#000" fill="#FFF" stroke-width="1" points="760,20 780,90 820,60"></polygon>
    <!--畫曲線-->
    <path d="M853 34C853 94 900 94 900 30" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--畫水平線-->
    <path d="M910,50H960" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 畫豎線 -->
    <path d="M980,10V90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 畫直線 -->
    <path d="M1010,10L1050,90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--畫平滑曲線-->
    <path d="M1060,50S1080,90 1100,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此處的S(x1,y1)是(1060,50)-->
    <!--畫平滑曲線-->
    <path d="M1060,50S1080,90 1100,50S1120,90 1140,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此處的第二個S(x1,y1)是(1080,90)關於(1140,50)的對稱點-->
    <!--二次貝塞爾曲線-->
    <path d="M1120,50Q1140,90 1160,50" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <path d="M1180,50Q1200,90 1220,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此處的第二個T(x1,y1)是(1200,90)關於(1220,50)的對稱點-->
    <path d="M1180,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此處的第二個T(x1,y1)是(1180,50)-->
</svg>

path命令參考http://www.w3.org/TR/SVG/paths.htmlsvg

svg rect

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

<svg width="400" height="180">
  <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" />
</svg>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

rx 和 ry 屬性可以使矩形產生圓角。url

svg circle

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

cx 和 cy 屬性定義圓點的 x 和 y 座標。若是省略 cx 和 cy，圓的中心會被設置爲 (0, 0)
r 屬性定義圓的半徑spa

svg ellipse

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

cx 屬性定義圓點的 x 座標code

cy 屬性定義圓點的 y 座標orm

rx 屬性定義水平半徑xml

ry 屬性定義垂直半徑htm

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

svg line

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

x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束圖片

svg polyline 折線

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

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4" />
</svg>

svg polygon 多邊形

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" 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>

<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="210" width="500">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

<svg height="210" width="500">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

points 屬性定義多邊形每一個角的 x 和 y 座標

svg path 路徑

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

以上全部命令均容許小寫字母。大寫表示絕對定位，小寫表示相對定位。

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

svg text

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

特定屬性：
x, y: 表示文本的橫縱座標
dx,dy: 表示移動的橫縱座標
rotate: 表示旋轉的度數

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <text x="5"  y="10" 
        style="font-family: Times New Roman;
               font-size  : 24;
               stroke     : #00ff00;
               fill       : #0000ff;">
    SVG text styling
      </text>
    </svg>

text-archor: The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of text relative to a given point.

<svg width="120" height="230" viewBox="0 0 120 230"
 xmlns="http://www.w3.org/2000/svg" version="1.1">

<!-- Materialisation of anchors -->
<path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />


<!-- Anchors in action -->
<text text-anchor="start"
      x="60" y="40">A</text>

<text text-anchor="middle"
      x="60" y="75">A</text>

<text text-anchor="end"
      x="60" y="110">A</text>

<!-- Materialisation of anchors -->
<circle cx="60" cy="40" r="3" fill="red" />
<circle cx="60" cy="75" r="3" fill="red" />
<circle cx="60" cy="110" r="3" fill="red" />

效果：請輸入圖片描述

屬性

stroke: 用於定義給定圖形元素的輪廓顏色
stroke-width: 用於定義給定圖形元素的輪廓線條大小

<circle r="15" style="stroke: grey; stroke-width:2; fill: red;"/>

stroke

stroke-linecap

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="16">
    <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>

請輸入圖片描述

stroke-dasharray
stroke-dasharray定義斷續線

<svg height="80" width="300">
  <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>

請輸入圖片描述

stroke-opacity
stroke-opacity不透明度

<svg width="500" height="120">
<text x="22" y="40">歡迎光臨www.waylau.com</text>
<path d="M20,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.3;
             " />
<path d="M80,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.7;
             " />
<path d="M140,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 1;
             " />
</svg>

SVG Filters之虛化Blur Effects

<svg height="110" width="110">
  <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>

代碼解釋：
該元素的id屬性定義了濾鏡的惟一名稱
元素定義了虛化效果
在in=「SourceGraphic」部分定義了在整個元素中建立的效果
該stdDeviation屬性定義虛化的值
該元件的濾鏡屬性連接到了「f1」濾鏡

SVG Filters之陰影Drop Shadows

示例1 SVG 

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

代碼解釋：
該元素的id屬性定義了濾鏡的惟一名稱
該元件的濾鏡屬性連接到了「f1」濾鏡

請輸入圖片描述

示例2 加上了 

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" 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>

示例3

<svg height="140" width="140">
  <defs>
    <filter id="f3" 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(#f3)" />
</svg>

請輸入圖片描述

代碼解釋：
元素改爲了"SourceAlpha"虛化中的Alpha通道代替了RGBA像素

示例4

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" 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(#f4)" />

代碼解釋：
轉換顏色，使偏移圖片的顏色值接近空（0）
矩陣中三個'0.2'是獲取了red、green、blue 通道
請輸入圖片描述

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