1. 程式人生 > >svg中fill-rule屬性解析

svg中fill-rule屬性解析

fill-rule屬性規定了svg圖形的填充規則

fill-rule
有效值 nonzero / evenodd / inherit
預設值 nonzero
應用於 shape形狀類元素和文字內容類元素
可繼承
比例
媒體 可見
動畫可用

fill-rule屬性用於指定使用哪一種短髮去判斷畫布上的某區域是否屬於該圖形的“內部”(內部區域將被 填充)。對一個簡單的無交叉的路徑,那塊區域是“內部”是很直觀清楚的。但是,對一個複雜的路徑,比如自相交或者一個子路徑包圍另一個自路徑,“內部”的理解就不是很明確了。

fill-rule屬性提供兩種選項用於指定如何判斷圖形的“內部”

  • nonzero
    字面意思是非零。按照規則,要判斷一個點是否在圖形內,從該點作任意方向的一條射線,然後檢測射線與圖形路徑的交點情況。從0開始計數,路徑從左向右穿過射線則計數加1,從右向左穿過射線則計數減1。得出計數結果後,如果結果是0,則認為點在圖形外部,否則認為在內部。如下:
    這裡寫圖片描述
    點選檢視示例svg檔案(僅適用於支援svg的瀏覽器)

  • evenodd
    字面意思是“奇偶”。按照規則,要判斷一個點是否在圖形內,該點作任意方向的一條射線,然後檢測射線與圖形路徑的交點的數量。如果結果是奇數則認為點在內部,是偶數則認為點在外部。如下:
    這裡寫圖片描述


    點選檢視示例svg檔案(僅適用於支援svg的瀏覽器)