国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

SVG 揚(yáng)帆起航

tanglijun / 1300人閱讀

摘要：基本的文檔由根元素和基本形狀元素構(gòu)成作為的一種方言，必須正確的綁定命名空間在屬性中綁定。另外，命令不用區(qū)分大小寫三次貝塞爾曲線或分別是起點(diǎn)終點(diǎn)控制點(diǎn)。不過，可以實(shí)現(xiàn)其功能與效果，因此，此屬性已經(jīng)被廢棄。可謂因?yàn)樾值芟酄幎晟匐E落的天王。

原文鏈接：http://hangyangws.win/2017/04...
本文不能讓你成為 SVG 大神，但是能讓你知道、了解他「揭開神秘面紗」
基礎(chǔ)認(rèn)知

SVG「Scalable Vector Graphics」表示「可縮放矢量圖形『放大不模糊』」面向未來「W3C 標(biāo)準(zhǔn)」。
基本的 SVG 文檔由 根元素和 基本形狀元素 構(gòu)成
作為 XML 的一種方言，SVG 必須正確的綁定命名空間（在 xmlns 屬性中綁定）。命名空間速成 獲取更多信息
SVG 文件全局有效的規(guī)則是 「后來居上」，越后面的元素越可見。

能做什么

動(dòng)畫、圖形、漸變、旋轉(zhuǎn)、濾鏡、JavaScript 接口、各種超酷的動(dòng)畫…

和 HTML 使用的幾種方式


不能使用JS來控制

.svg { background-image: url(xxx.svg);}
最好不使用 base64 格式化 SVG「阻塞其它資源」、不能使用 JS 控制

Not support SVG
能使用JS來控制「推薦方式」

…
節(jié)省 HTTP 請(qǐng)求，能使用 JS 控制，不能被瀏覽器緩存

坐標(biāo)系統(tǒng)

看圖說話「原點(diǎn)在左上角」：

viewBox

viewBox demo

動(dòng)畫理解：

深度閱讀 - viewBox

CSS、JS 與 SVG 內(nèi)斂樣式
外鏈樣式
JS 操作 SVG

如果 SVG 代碼作為 DOM 在 HTML 內(nèi)部，可以向平常一樣操作 DOM 操作 SVG
如果是使用 你可以使用 contentDocument 來控制它 SVG

注意

調(diào)用

：文本節(jié)點(diǎn)，可以實(shí)現(xiàn) word 中的那種「藝術(shù)字」

：在 SVG 中嵌套圖片，可以對(duì)圖片做對(duì)應(yīng)的處理

…

SVG 形狀元素

來張圖壓壓驚：

點(diǎn)我查看 SVG 元素的基本 DEMO

別說話，先舉個(gè) ? ，一起感受一下 path：點(diǎn)我

基于 path 的不同屬性，可以畫出各種各樣的路徑，所以 path 可算是 SVG 的「節(jié)點(diǎn)之王」  
除了 path 之外的節(jié)點(diǎn)都「比較普通」，可以看成是對(duì) path 的封裝，比如「Rect、Circle…」

命令
命令都用一個(gè)關(guān)鍵字母來表示，命令 都有兩種 表示方式

大寫字母，表示采用「絕對(duì)定位」

小寫字母，表示采用「相對(duì)定位『相對(duì)于上一個(gè)點(diǎn)』」

path 的命令列表 
document.getElementById(‘path’).getTotalLength() 得到路徑長度

M：moveto 移動(dòng)到

L：lineto 畫線到；H：horizontal lineto 水平線到；V：vertical lineto 垂直線到

L 命令將會(huì)在當(dāng)前位置和新位置之間畫一條線段：L x y (or l dx dy)
還有兩個(gè)簡寫命令：H，繪制平行線。V，繪制垂直線。這兩個(gè)命令都只帶一個(gè)參數(shù)，標(biāo)明在 x 或 y 軸移動(dòng)到的位置：H x (or h dx) 、V y (or v dy)

Z：closepath 關(guān)閉路徑

Z 命令會(huì)從當(dāng)前點(diǎn)畫一條直線到路徑的起點(diǎn)，所以它還是經(jīng)常被放到路徑的最后。另外，Z 命令不用區(qū)分大小寫：Z (or z)

C：curveto 三次貝塞爾曲線

C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy
(x1, y1)、(x2, y2) 分別是起點(diǎn)、終點(diǎn)控制點(diǎn)。最后一個(gè)坐標(biāo) (x, y)，表示曲線的終點(diǎn)
三次貝塞爾曲線 表現(xiàn)形式 是：曲線沿著 起點(diǎn)開始 到第一控制點(diǎn)的方向伸出，逐漸彎曲，然后沿著第二控制點(diǎn)到 終點(diǎn)的方向結(jié)束

S：smooth curveto 光滑三次貝塞爾曲線

S 命令可以用來創(chuàng)建與之前那些曲線一樣的貝塞爾曲線，通常和 C 命令一起使用
如果 S 命令跟在一個(gè) C 命令或者另一個(gè) S 命令的后面，它的第一個(gè)控制點(diǎn)，就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱點(diǎn)，不應(yīng)該寫出來，所以 S 省略了一個(gè)對(duì)稱點(diǎn)

Q：quadratic Belzier curve 二次貝塞爾曲線

Q x1 y1, x y 或 q dx1 dy1, dx dy

T：smooth quadratic Belzier curveto 光滑二次貝塞爾曲線

T x y 或 t dx dy
T 命令類似于 S 命令，用于二次貝塞爾曲線。T 命令前面最好是一個(gè) Q 命令，或者是另一個(gè) T 命令
如果 T 多帶帶使用，那么控制點(diǎn)就會(huì)被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)，所以畫出來的將是一條直線

A：elliptical Arc 橢圓弧

A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx ry：「橢圓」的 x，y半徑
x-axis-rotation：X 軸旋轉(zhuǎn)角度，順時(shí)針為正數(shù)
large-arc-flag：1 表示用大弧度，0 表示小弧度
sweep-flag：弧度回話方向，1 順時(shí)針，0 逆時(shí)針
x y：弧度終點(diǎn)

元素與樣式

stroke

fill

transform

linearGradient

mask

filter

clipPath

一些 Demo：
svg 模糊 demo
symbol demo
symbol-use-demo
text mask demo
mask demo
clip demo
SVG 文字路徑動(dòng)畫
linearGradient Demo

使用 CSS 請(qǐng)注意
把 background-color、border 改成 fill 和 stroke
上色和填充的部分一般是可以用 CSS 來設(shè)置的，比如 fill，stroke，stroke-dasharray，但不包括漸變和圖案等。
另外，width、height，以及路徑的命令等等，都不能用 css 設(shè)置
不是所有的屬性都能用 CSS 來設(shè)置：SVG 規(guī)范 將屬性區(qū)分成 properties 和 attributes，前者是可以用 CSS 設(shè)置的，后者不能

SVG 動(dòng)畫 
SVG 動(dòng)畫 集合  
SVG 的動(dòng)畫元素是和 SMIL Synchronized Multimedia Integration Language開發(fā)組合作開發(fā)的。  
SMIL 開發(fā)組和 SVG 開發(fā)組合作開發(fā)了 SMIL 動(dòng)畫規(guī)范，在規(guī)范中制定了一個(gè)基本的 XML 動(dòng)畫特征集合。  
SVG 吸收了 SMIL 動(dòng)畫規(guī)范當(dāng)中的動(dòng)畫優(yōu)點(diǎn)，并提供了一些SVG繼承實(shí)現(xiàn)。

大概三種實(shí)現(xiàn)方式：

JS 動(dòng)畫「DOM 操作『忽視它』」

CSS3 動(dòng)畫「animation、transition『不是 svg 的重點(diǎn)』」

SVG 本身的動(dòng)畫「基于 SMIL」「主要借助 SVG animate 相關(guān)標(biāo)簽」

set

set 表示此元素沒有動(dòng)畫效果 ???。
好吧：這樣的，雖然 set 雖然不能觸發(fā)連續(xù)的動(dòng)畫，但是，其還是可以實(shí)現(xiàn)基本的延遲功能。
就是指：可以在特定時(shí)間之后修改某個(gè)屬性值「也可以是 CSS 屬性值」。

一個(gè) Demo

animate

SVG animation 最強(qiáng)大的地方在于：「只要在頁面放幾個(gè) animate 元素，沒有任何 CSS, 沒有任何JS」

一個(gè) Demo

animateColor

一看就知道是顏色動(dòng)畫。不過，animate 可以實(shí)現(xiàn)其功能與效果，因此，此屬性已經(jīng)被廢棄。
可謂因?yàn)樾值芟酄幎晟匐E落的天王。逝者已矣，過去的就讓它過去吧 ~~~

animateTransform

一個(gè) Demo

animateMotion

animateMotion 元素可以讓 SVG 各種圖形沿著特定的 path 路徑運(yùn)動(dòng) ~~~

一個(gè) Demo

例子分析

組合：
一個(gè) Demo

end 事件：
一個(gè) Demo

click 事件：
一個(gè) Demo

進(jìn)階閱讀推薦

貝塞爾曲線原理「簡單闡述」

工具推薦

svgo

項(xiàng)目地址：點(diǎn)我查看
比較厲害的壓縮優(yōu)化 SVG 的工具，可以將 SVG 中的無用信息刪掉，同時(shí)支持代碼進(jìn)行壓縮

SVGOMG

展示地址：SVGOMG - SVGO"s Missing GUI
SVGOMG 是 svgo 的可視化界面工具，操作起來很方便，還提供了一些其他有用的功能

Snap.svg

項(xiàng)目地址：Snap.svg - Home
Snap.svg 是一個(gè)可以使你操縱 SVG 資源和 jQuery 操作 DOM 一樣簡單的類庫，
可以寫出更加復(fù)雜的 SVG 效果，同時(shí)文檔超級(jí)齊全，推薦給想深入了解的同學(xué)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51562.html

相關(guān)文章

  • 行業(yè)報(bào)告 | 2021.10.06 | 研報(bào)目錄更新

    大家好，我們每天全網(wǎng)搜集各行各業(yè)的研究報(bào)告，了解一個(gè)行業(yè)從閱讀這個(gè)行業(yè)的研報(bào)開始，今日分享目錄如下： 20211006分享目錄： 2021抖音電商商家經(jīng)營方法論白皮書-34頁.pdf 2021中國數(shù)據(jù)智能產(chǎn)業(yè)發(fā)展研究報(bào)告-50頁.pdf 2021公益數(shù)字化轉(zhuǎn)型-56頁.pdf 2021年中國一線城市出行平臺(tái)調(diào)研報(bào)告-77頁.pdf 2021年中國內(nèi)容機(jī)構(gòu)（MCN）行業(yè)發(fā)展研究報(bào)告-66頁.pd...

    dinfer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<