溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML5 SVG中如何使用筆畫與填充

發布時間:2021-10-08 15:01:46 來源:億速云 閱讀:155 作者:柒染 欄目:web開發

HTML5 SVG中如何使用筆畫與填充,針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

前面我們重點都在總結各類形狀,文本和圖片,接下來,我們還是和討論canvas一樣,總結一下顏色處理,也就是填充和邊框效果;你會發現這里的內容與canvas基本上是一致的。這些屬性既可以以屬性的形式寫在元素中,也可以以CSS的形式保存(這是與canvas不一樣的地方)。
填充色 - fill屬性
這個屬性使用設置的顏色填充圖形內部,使用很簡單,直接把顏色值賦給這個屬性就可以了??蠢樱?br/>

代碼如下:


<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"
      fill-opacity="0.5" stroke-opacity="0.8"/>


上面例子中畫了一個紅色藍邊的矩形。注意幾點:
1. 如果不提供fill屬性,則默認會使用黑色填充,如果要取消填充,需要設置成none。
2. 可以設置填充的透明度,就是fill-opacity,值的范圍是0到1。
3. 稍微復雜一點的是fill-rule屬性。這個屬性定義了判斷點是不是屬于填充范圍的算法;除了inherit這個值外,還有兩個取值:nonzero:這個值采用的算法是:從需要判定的點向任意方向發射線,然后計算圖形與線段交點的處的走向;計算結果從0開始,每有一個交點處的線段是從左到右的,就加1;每有一個交點處的線段是從右到左的,就減1;這樣計算完所有交點后,如果這個計算的結果不等于0,則該點在圖形內,需要填充;如果該值等于0,則在圖形外,不需要填充。

evenodd:這個值采用的算法是:從需要判定的點向任意方向發射線,然后計算圖形與線段交點的個數,個數為奇數則改點在圖形內,需要填充;個數為偶數則點在圖形外,不需要填充。

邊框色 - stroke屬性
上面的例子中已經用到了stroke屬性,這個屬性使用設置的值畫圖形的邊框,使用起來也很直接,把顏色值賦給它就可以了。注意:
1. 如果不提供stroke屬性,則默認不繪制圖形邊框。
2. 可以設置邊的透明度,就是stroke-opacity,值的范圍是0到1。
實際上,邊的情況比圖形內部稍微復雜一點,因為邊除了顏色,還有"形狀"需要定義。

線的端點 - stroke-linecap屬性

這個屬性定義了線段端點的風格,這個屬性可以使用butt,square,round三個值??蠢樱?br/>

代碼如下:


<svg width="160" height="140">
 <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
 <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
 <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

HTML5 SVG中如何使用筆畫與填充


這段代碼繪制了3條使用不同風格線端點的線,

從左面的圖中我們可以很容易看出3中風格的不同。

線的連接 - stroke-linejoin屬性
這個屬性定義了線段連接處的風格,這個屬性可以使用miter,round,bevel三個值??蠢樱?br/>

代碼如下:


<svg width="160" height="280">
 <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
     stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/>
 
 <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
     stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>
 
 <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
     stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/>
</svg>



HTML5 SVG中如何使用筆畫與填充

從左面的圖中我們很容易看到3中風格的不同。

線的虛實 - stroke-dasharray屬性

這個屬性可以設置線段采用何種虛實線??蠢樱?br/>

代碼如下:


<svg width="200" height="150">
 <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
   stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
 <path d="M 10 75 L 190 75" stroke="red"
   stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>

這個屬性是設置一些列數字,不過這些數字必須是逗號隔開的。

屬性中當然可以包含空格,但是空格不作為分隔符。每個數字

定義了實線段的長度,分別是按照繪制、不繪制這個順序循環下去。

所以左面的例子中繪制的線是畫5單位的實線,留5單位的空格,

再畫5單位的實線...這樣一直下去。

除了這些常用的屬性,還有下列屬性可以設置:
stroke-miterlimit:這個和canvas中的一樣,它處理什么時候畫和不畫線連接處的miter效果。
stroke-dashoffset:這個屬性設置開始畫虛線的位置。

使用CSS展示數據
HTML5強化了DIV+CSS的思想,所以展示數據的部分還可以交給CSS處理。與普通HTML元素相比,只不過是 background-color和border換成了fill和stroke。其他的大多都差不多。簡單看個例子:

代碼如下:


#MyRect:hover {
  stroke: black;
  fill: blue;
}


是不是很熟悉,就是這么簡單的。

關于HTML5 SVG中如何使用筆畫與填充問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注億速云行業資訊頻道了解更多相關知識。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女