day03-svg標籤
day03
文章目錄
一:SVG(可伸縮向量圖形)
特點:
- 用於網路的向量圖形(高質量的被列印)
- 使用xml格式定義的圖形(可以使用文字編輯器來建立和修改)
- 放大或者極度縮小的情況下圖形不會失真
- SVG 影像中的文字是可選的,同時也是可搜尋的(很適合製作地圖)
二:相容性
IE8及以下的瀏覽器不支援,使用外掛(Adobe SVG)可以在IE8執行
三:svg和canvas的區別
-
—svg是通過xml語言進行描述的
—canvas是通過js指令碼語言進行繪製的
-
—svg圖形可以進行動態的修改
—canvas圖形一經繪製,不能改動,否則只有重新繪製
-
—svg不依賴電腦的解析度
—canvas依賴解析度
-
—svg的每一個元素都可以使用dom事件進行處理,
—canvas不支援事件處理
四:svg檔案在html的使用方式
-
embed,iframe標籤
—優點:允許指令碼使用
—缺點:H4和XHTMl中不能使用(H5可以)
<embed src="circle1.svg" type="image/svg+xml" /> <iframe src="circle1.svg"></iframe>
-
object標籤
—優點:H4,H5和XHTMl都可以使用
—缺點:不允許指令碼使用
<object data="circle1.svg" type="image/svg+xml"></object>
-
使用a標籤進行連線
<a href="circle1.svg">View SVG file</a>
五:svg的使用
1·繪製圓
- circle標籤建立一個圓
- stroke:表示繪製邊框顏色
- stroke-width:表示邊框寬度
-
fill:表示填充 顏色
- cx,cy表示圓中心的座標(行內)
- r:表示圓的半徑
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<!--xmlns:是svg的名稱空間
version表示:使用的svg的版本
width,height表示:整個svg的繪製區域 (預設300*150)
-->
<circle cx="200" cy="200" r="100" stroke="blue" stroke-width="5" fill="yellow" />
</svg>
2· 繪製矩形
-
rect標籤建立矩形
-
width,height:定義矩形的高寬
-
x: 定義矩形距離瀏覽器左側的距離(行內)
-
y: 定義矩形距離瀏覽器上側的距離(行內)
-
rx 和 ry 屬性可使矩形產生圓角。(行內)
#square {
stroke: black;
stroke-width: 4px;
fill: aqua;
fill-opacity:0.3;
}
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
class="all">
<!--opacity屬性定義整個圖形的透明度
fill-opacity屬性定義填充透明度
stroke-opacity 屬性定義輪廓透明度(合法的範圍是:0 - 1)-->
<rect id="square" x="20px" y="20px" rx="30px" ry="50px"/>
</svg>
3·繪製橢圓
- rx:定義水平半徑
- ry:定義垂直半徑
<svg style="width: 600px; height:600px">
<ellipse class="tuo" cx="300" cy="80" rx="90" ry="50" />
</svg>
4·繪製直線
- x1:開始的x座標
- x2:結束繪製的y座標
- y1:開始的y座標
- y2:結束的y座標
<svg>
<line x1="50" y1="100" x2="200" y2="50"/>
</svg>
5·繪製多邊形
- polygon 標籤是用來繪製多邊形的
- 多邊形是有直線構成的,封閉的圖形
- points:寫明每一個點之間的座標(x,y)
<svg>
<polygon points="100,200,500,200,200,300,300,100,400,300" fill-rule=”evenodd“/>
</svg>
-
fill-rule:svg圖形的填充規則(判斷某一區域是否屬於內部【內部被填充】)
—nonzero(從該點做任意方向的射線,路徑從左—>右穿過射線,加一;從右—>左穿過射線,減一;結果為0,該點在外部,反之,)
l-rule=”evenodd“/>
- fill-rule:svg圖形的填充規則(判斷某一區域是否屬於內部【內部被填充】)
—nonzero(從該點做任意方向的射線,路徑從左—>右穿過射線,加一;從右—>左穿過射線,減一;結果為0,該點在外部,反之,)
—evenodd(射線與路徑的相交點,奇數在內部,填充)
相關文章
- properties標籤和typeAliases標籤
- HTML標籤(基本標籤的使用)HTML
- VOC標籤轉化為YOLO標籤YOLO
- HTML <a> 標籤HTML
- html標籤HTML
- Git 標籤Git
- base標籤
- JSTL標籤JS
- K8S標籤與標籤選擇器K8S
- HTML簡介,結構,標籤以及標籤語義HTML
- html標籤整理HTML
- HTML 常用標籤HTML
- HTML <label> 標籤HTML
- HTML <body>標籤HTML
- 標籤記錄
- html基本標籤HTML
- HTML <div>標籤HTML
- html列表標籤HTML
- Git tag 標籤Git
- HTML <meta>標籤HTML
- HTML <iframe>標籤HTML
- HTML <span>標籤HTML
- HTML <head>標籤HTML
- xss常用標籤
- HTML <figcaption> 標籤HTMLGCAPT
- HTML <dialog> 標籤HTML
- HTML <time> 標籤HTML
- HTML <aside> 標籤HTMLIDE
- HTML <article> 標籤HTML
- HTML <section> 標籤HTML
- HTML <main> 標籤HTMLAI
- HTML <var> 標籤HTML
- HTML <canvas> 標籤HTMLCanvas
- 基礎標籤
- JavaScript <script>標籤JavaScript
- 表單標籤
- HTML常用標籤HTML
- HTML <header> 標籤HTMLHeader