日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一篇文章帶你了解SVGstroke屬性

stroke屬性定義了給定圖形元素的外輪廓的顏色。它的默認(rèn)值是none。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)杜集免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

一、屬性

1. stroke-width

SVG具有stroke-width定義筆觸寬度的CSS屬性。

例：

（這是四個不同的示例stroke-width）

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9.

代碼解析：

將筆劃寬度設(shè)置為3個像素。您可以使用不同于像素的單位。在[SVG坐標(biāo)系統(tǒng)單位中查看所有可用單位。

運行后圖像效果：

2. stroke-linecap(描邊線帽)

strokelinecap屬性定義不同類型的開放路徑的終結(jié)。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.

3. stroke-linejoin

該CSS屬性stroke-linejoin, 定義如何在一個形狀兩條線之間的連接被渲染。該CSS屬性stroke-linejoin可以采用三個值中的一個。這些值是(miter，round，bevel)。

案例：

stroke-linejoin，說明了這些不同的值。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
  3. miter
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6. round
    7. 
  
  
  
  
  7. 
  
  
  
  
    9. 
  
  
  
  
  9. bevel
    10. 
  
  
  
  
  10.

4. stroke-miterlimit

style樣式中stroke-miterlimit屬性與stroke-linejoin一起使用。

如果stroke-linejoin設(shè)置為斜接，則stroke-miterlimit可以使用來限制兩條線相交的點（線角（角）延伸）之間的距離。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.            stroke-linejoin: miter; stroke-miterlimit: 1.0;
    4. 
  
  
  
  
  4.             ">
    5. 
  
  
  
  
  5. 1.0
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.             stroke-width:16px;
    8. 
  
  
  
  
  8.             stroke-linejoin: miter;             stroke-miterlimit: 2.0;
    9. 
  
  
  
  
  9.             ">
    10. 
  
  
  
  
  10. 2.0
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.             stroke-width:16px;
    13. 
  
  
  
  
  13.             stroke-linejoin: miter;             stroke-miterlimit: 4.0;
    14. 
  
  
  
  
  14.             ">
    15. 
  
  
  
  
  15. 4.0
    16. 
  
  
  
  
  16.

注意

stroke-miterlimit，三個路徑如何使用三個不同的值，否則它們看起來幾乎相同。

運行后圖像效果：

5. stroke-dasharray

SVG CSS屬性 stroke-dasharray用于繪制以虛線呈現(xiàn)的SVG形狀的筆觸。之所以稱為“破折號數(shù)組”，是因為您提供了一個數(shù)字?jǐn)?shù)組作為值。這些值定義破折號和空格的長度。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.      stroke-width: 6px;     stroke-dasharray: 10 5" />
    4. 
  
  
  
  
  4.

定義了一個帶有虛線的筆劃，虛線部分的寬度為10像素，虛線之間的間隔為5像素。

運行后圖像效果：

帶有不同破折號和空格寬度的

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. 
  
  
  
  
  8.

 運行后圖像效果：

代碼解析：

第一行以10的虛線寬度開始，然后是5像素的間距，然后是5像素的虛線，然后是5像素的另一間距。然后重復(fù)該模式。

第二行以虛線寬度10開始，然后是5像素的間距，然后是5像素的虛線，最后是10像素的間距。

6. stroke-opacity

SVG CSS屬性stroke-opacity用于定義SVG形狀輪廓的不透明度。stroke-opacity取0和1之間的十進(jìn)制數(shù)越接近0的值，越透明行程。該值越接近1，則筆劃越不透明。默認(rèn)stroke-opacity值為1，表示筆劃完全不透明。

案例中，顯示了三行帶有不同stroke-opacity文本頂部的行 。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. Text Behind Shape
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
  5.                 stroke-width:16px;
    6. 
  
  
  
  
  6.                 stroke-opacity: 0.3;
    7. 
  
  
  
  
  7.                 ">
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. 
  
  
  
  
  10.         stroke-opacity: 0.7;
    11. 
  
  
  
  
  11.                 ">
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. 
  
  
  
  
  14.                 stroke-opacity: 1;
    15. 
  
  
  
  
  15.                 ">
    16. 
  
  
  
  
  16.

 運行效果:

注意：

靠后文本越來越不可見。

二、總結(jié)

本文基于Html基礎(chǔ)，介紹了stoke屬性。添加不一樣的屬性實現(xiàn)不同的效果，對于每一種屬性進(jìn)行詳細(xì)的講解通過豐富的案例分析，希望能夠幫助你更好的學(xué)習(xí)。

歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。


網(wǎng)頁名稱：一篇文章帶你了解SVGstroke屬性
本文來源：http://m.5511xx.com/article/cdjhcse.html