SVG

SVG意為可伸縮矢量圖形

# 基本樣式應(yīng)用
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  # 定義路徑 M路徑開始 L路徑到達 Z關(guān)閉路徑
  <path d="M50 50 L100 150 L150 150 Z" />

  # 創(chuàng)建折線 points="x1,y1 x2,y2 x3,y3...."
  <polyline points="0,0 10,20 30,50 60,80 90,120 90,160" style="fill:white;stroke:red;stroke-width:2"/>

  # 定義不少于三個角的多邊形 points="x1,y1 x2,x2 x3,y3..."
  <polygon points="0,30 40,30 60,90" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

  # 定義線條 x1 X軸線條開始 y1 Y軸線條開始 x2 X軸線條結(jié)束 y2 Y軸線條結(jié)束
  <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

  # 定義橢圓 cx圓X坐標(biāo) cy圓Y坐標(biāo) rx水平半徑 ry垂直半徑
  <ellipse cx="300" cy="300" rx="155" ry="55" style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

  # 定義圓 cx圓X坐標(biāo) cy圓Y坐標(biāo) r半徑 fill填充色 stroke邊框色 stroke-width邊框?qū)?  <circle cx='150' cy='150' r='70' fill="red" stroke="black" stroke-width="2"/>

  # 定義矩形 寬|| 高 || 填充色 || 邊框?qū)?|| 線條色
  <rect style="width:150px;height:150px;fill:rgba(0,0,0,0.5);stroke-width:1;stroke:rgba(122,122,122,0.6);opacity:0.2"></rect>
</svg>

# 線性漸變
 1. linearGradient定義線性漸變
 2. x1霉猛、x2、y1、y2 屬性可定義漸變的開始和結(jié)束位置
 3. 漸變顏色由 stop標(biāo)簽來設(shè)定
 4. x1 x2 y1 y2值不同漸變也就不同
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>

# 放射漸變
 1. radialGradient定義放射漸變 cx cy r 外層圓 || fx fy 內(nèi)層圓
 2. stop標(biāo)簽用來設(shè)置顏色 offset屬性定義漸變的開始和結(jié)束
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="0%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
    </radialGradient>
  </defs>
  <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>

#  定義濾鏡
 1. defs標(biāo)簽必須包裹fliter標(biāo)簽
 2. fliter標(biāo)簽屬性id用來指定那個圖形應(yīng)用該路徑
 3. feGaussianBlur標(biāo)簽用來定義濾鏡效果
 4. stdDeviation定義模糊程度
 5. in="SourceGraphic"由整個圖像創(chuàng)建
 6. 給應(yīng)用圖像使用filter:url(#指定的id)屬性
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
  </defs>
  <rect width="200" height="200" style="fill:red;stroke: blue;filter:url(#orange_red)" stroke-width="5"></rect>
</svg>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鼻百,一起剝皮案震驚了整個濱河市扬虚,隨后出現(xiàn)的幾起案子能曾,更是在濱河造成了極大的恐慌涨颜,老刑警劉巖沐兵,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件曙旭,死亡現(xiàn)場離奇詭異盗舰,居然都是意外死亡,警方通過查閱死者的電腦和手機桂躏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門钻趋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人剂习,你說我怎么就攤上這事蛮位。” “怎么了鳞绕?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵失仁,是天一觀的道長。 經(jīng)常有香客問我们何,道長萄焦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任冤竹,我火速辦了婚禮拂封,結(jié)果婚禮上茬射,老公的妹妹穿的比我還像新娘。我一直安慰自己冒签,他們只是感情好躲株,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著镣衡,像睡著了一般霜定。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上廊鸥,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天望浩,我揣著相機與錄音,去河邊找鬼惰说。 笑死磨德,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吆视。 我是一名探鬼主播典挑,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼啦吧!你這毒婦竟也來了您觉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤授滓,失蹤者是張志新(化名)和其女友劉穎琳水,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體般堆,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡在孝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了淮摔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片私沮。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖和橙,靈堂內(nèi)的尸體忽然破棺而出仔燕,到底是詐尸還是另有隱情,我是刑警寧澤胃碾,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布涨享,位于F島的核電站,受9級特大地震影響仆百,放射性物質(zhì)發(fā)生泄漏厕隧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吁讨。 院中可真熱鬧髓迎,春花似錦、人聲如沸建丧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽翎朱。三九已至橄维,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間拴曲,已是汗流浹背争舞。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留澈灼,地道東北人竞川。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像叁熔,于是被迫代替她去往敵國和親委乌。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

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