SVG 筆記

1. svg的基礎(chǔ)原型

<rect> 矩形 <cricle> 圓形 <ellipse> 橢圓 <line> 線 <polyline> 折線 <polygon>多邊形 <path> 路線

1.1 矩形的屬性

Attribute: width :寬度
height :高度
fill :填充色
stroke-width 矩形邊框?qū)挾?br> stroke:矩形邊框顏色
opacity :定義元素的透明度
rx 和 ry 屬性可使矩形產(chǎn)生圓角

1.2圓形的屬性

cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy露久,圓的中心會(huì)被設(shè)置為 (0, 0)
r 屬性定義圓的半徑校摩。

1.3橢圓的屬性

cx 屬性定義圓點(diǎn)的 x 坐標(biāo)
cy 屬性定義圓點(diǎn)的 y 坐標(biāo)
rx 屬性定義水平半徑
ry 屬性定義垂直半徑

1.4 線條的屬性

x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結(jié)束
y2 屬性在 y 軸定義線條的結(jié)束

1.5 多邊形屬性

points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)

1.6 折線的屬性

跟多邊形一樣都是points

1.7路徑的屬性

下面的命令可用于路徑數(shù)據(jù):
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

實(shí)例:
<path d="M250 150 L150 350 L350 350 Z" />
上面的例子定義了一條路徑蕴侣,它開始于位置 250 150,到達(dá)位置 150 350奄容,然后從那里開始到 350 350缘挽,最后在 250 150 關(guān)閉路徑北发。

1.8svg濾鏡

在 SVG 中,可用的濾鏡有:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

必須在 <defs> 標(biāo)簽中定義 SVG 濾鏡盔腔。

高斯模糊(Gaussian Blur)

<filter> 標(biāo)簽用來(lái)定義 SVG 濾鏡杠茬。<filter> 標(biāo)簽使用必需的 id 屬性來(lái)定義向圖形應(yīng)用哪個(gè)濾鏡?

<filter> 標(biāo)簽必須嵌套在 <defs> 標(biāo)簽內(nèi)铲觉。<defs> 標(biāo)簽是 definitions 的縮寫澈蝙,它允許對(duì)諸如濾鏡等特殊元素進(jìn)行定義。

實(shí)例:
<?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">

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>

</svg>

<filter> 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱(同一濾鏡可被文檔中的多個(gè)元素使用)
filter:url 屬性用來(lái)把元素鏈接到濾鏡撵幽。當(dāng)鏈接濾鏡 id 時(shí)灯荧,必須使用 # 字符
濾鏡效果是通過(guò) <feGaussianBlur> 標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡
<feGaussianBlur> 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果.

SVG 漸變

漸變是一種從一種顏色到另一種顏色的平滑過(guò)渡盐杂。另外逗载,可以把多個(gè)顏色的過(guò)渡應(yīng)用到同一個(gè)元素上。

在 SVG 中链烈,有兩種主要的漸變類型:

線性漸變

放射性漸變

線性漸變

<linearGradient> 可用來(lái)定義 SVG 的線性漸變厉斟。

<linearGradient> 標(biāo)簽必須嵌套在 <defs> 的內(nèi)部。<defs> 標(biāo)簽是 definitions 的縮寫强衡,它可對(duì)諸如漸變之類的特殊元素進(jìn)行定義擦秽。

線性漸變可被定義為水平、垂直或角形的漸變:

當(dāng) y1 和 y2 相等,而 x1 和 x2 不同時(shí)感挥,可創(chuàng)建水平漸變
當(dāng) x1 和 x2 相等缩搅,而 y1 和 y2 不同時(shí),可創(chuàng)建垂直漸變
當(dāng) x1 和 x2 不同触幼,且 y1 和 y2 不同時(shí)硼瓣,可創(chuàng)建角形漸變

放射性漸變

<radialGradient> 用來(lái)定義放射性漸變。

<radialGradient> 標(biāo)簽必須嵌套在 <defs> 中置谦。<defs> 標(biāo)簽是 definitions 的縮寫堂鲤,它允許對(duì)諸如漸變等特殊元素進(jìn)行定義

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市媒峡,隨后出現(xiàn)的幾起案子瘟栖,更是在濱河造成了極大的恐慌,老刑警劉巖丝蹭,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件慢宗,死亡現(xiàn)場(chǎng)離奇詭異坪蚁,居然都是意外死亡奔穿,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門敏晤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)贱田,“玉大人,你說(shuō)我怎么就攤上這事嘴脾∧写荩” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵译打,是天一觀的道長(zhǎng)耗拓。 經(jīng)常有香客問(wèn)我,道長(zhǎng)奏司,這世上最難降的妖魔是什么乔询? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮韵洋,結(jié)果婚禮上竿刁,老公的妹妹穿的比我還像新娘。我一直安慰自己搪缨,他們只是感情好食拜,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著副编,像睡著了一般负甸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天呻待,我揣著相機(jī)與錄音煮盼,去河邊找鬼。 笑死带污,一個(gè)胖子當(dāng)著我的面吹牛僵控,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鱼冀,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼报破,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了千绪?” 一聲冷哼從身側(cè)響起充易,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎荸型,沒(méi)想到半個(gè)月后盹靴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瑞妇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年稿静,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辕狰。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡改备,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蔓倍,到底是詐尸還是另有隱情悬钳,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布偶翅,位于F島的核電站默勾,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏聚谁。R本人自食惡果不足惜母剥,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望垦巴。 院中可真熱鬧媳搪,春花似錦、人聲如沸骤宣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)憔披。三九已至等限,卻和暖如春爸吮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背望门。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工形娇, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人筹误。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓桐早,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親厨剪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子哄酝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • SVG 學(xué)習(xí)筆記 SVG是什么 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) S...
    Penn_Xu閱讀 988評(píng)論 0 1
  • 什么是SVG? SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來(lái)定義用...
    hojun閱讀 888評(píng)論 0 5
  • 一祷膳、什么是SVG陶衅? SVG指可伸縮矢量圖形(Scalable Vector Graphics); SVG用來(lái)定義用...
    清心挽風(fēng)閱讀 1,403評(píng)論 1 3
  • 一.什么是SVG直晨? SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來(lái)定義...
    nightZing閱讀 17,065評(píng)論 11 62
  • 一:什么是SVG搀军? 對(duì)于SVG的定義如下: ①:SVG 指的是可伸縮矢量圖形 (Scalable Vector G...
    GreenHand1閱讀 810評(píng)論 0 1