svg中fill-rule屬性解析
阿新 • • 發佈:2019-02-04
fill-rule屬性規定了svg圖形的填充規則
fill-rule | |
---|---|
有效值 | nonzero / evenodd / inherit |
預設值 | nonzero |
應用於 | shape形狀類元素和文字內容類元素 |
可繼承 | 是 |
比例 | 無 |
媒體 | 可見 |
動畫可用 | 是 |
fill-rule屬性用於指定使用哪一種短髮去判斷畫布上的某區域是否屬於該圖形的“內部”(內部區域將被 填充)。對一個簡單的無交叉的路徑,那塊區域是“內部”是很直觀清楚的。但是,對一個複雜的路徑,比如自相交或者一個子路徑包圍另一個自路徑,“內部”的理解就不是很明確了。
fill-rule屬性提供兩種選項用於指定如何判斷圖形的“內部”
nonzero
字面意思是非零。按照規則,要判斷一個點是否在圖形內,從該點作任意方向的一條射線,然後檢測射線與圖形路徑的交點情況。從0開始計數,路徑從左向右穿過射線則計數加1,從右向左穿過射線則計數減1。得出計數結果後,如果結果是0,則認為點在圖形外部,否則認為在內部。如下:
點選檢視示例svg檔案(僅適用於支援svg的瀏覽器)evenodd
字面意思是“奇偶”。按照規則,要判斷一個點是否在圖形內,該點作任意方向的一條射線,然後檢測射線與圖形路徑的交點的數量。如果結果是奇數則認為點在內部,是偶數則認為點在外部。如下:
點選檢視示例svg檔案(僅適用於支援svg的瀏覽器)