基本形狀 基本 SVG 文件 2

2021-04-14 02:11:20 字數 1406 閱讀 3244

定義和組

......

如前一頁中定義的多邊形和漸變,預定義項的實際用法通常有兩種形式。

在這兩種形式下,定義的項都通過其本地 url(或 uri)引用。象 html 頁面一樣,id 屬性建立了文件中的乙個引用點。舉例說來,這意味著 uri #irisgradient 引用標識為 irisgradient 的文件部分(或漸變定義)。即:可以從圓元素的 fill 屬性內部引用它。

請注意 url() 函式的使用。

最終**在本節最後一頁顯示。請注意漸變現在用於眼睛的虹膜:

最後,svg 不僅僅可以定義單個元素,這一點或許可以從前面討論的 元素猜測出來。

為兼顧可讀性和方便性,將元素安排在一組中通常是個好辦法。針對這一目的,svg 提供 元素,它建立乙個可以將元素置於其中的容器。這個容器可以用來標識元素,或提供乙個公共屬性(本地定義的屬性將會覆蓋公共屬性)。例如**

......

......

建立乙個所有筆劃都是 3 個畫素寬的眼睛(因為沒有元素定義筆劃寬度),而除了外邊框筆劃外所有筆劃都是紅色(因為橢圓定義了筆劃顏色)。

最終的文件顯示各部分是如何新增的:

<?xml version="1.0"?>

reusing items

請注意可重用元素也允許每次使用不同的屬性值,正如上面虹膜的例子中的填充屬性所示。

--------------------繪製

整個教程到目前為止,示例已經演示了圍繞物件的筆劃或線以及物件內部區域的填充。這些屬性實際上還有子屬性,也可以設定子屬性來建立不同的效果。這些屬性包括:

fill:該屬性指定用來填充物件內部區域的顏料。大多數情況下,該屬性只是一種顏色,但它也可以是漸變或圖案(會在圖案中介紹)。這個值通常是關鍵字、顏色說明或指向預定義元素的 uri。

fill-opacity:該屬性指定元素的透明性。值的範圍從完全透明(0)到完全不透明(1)。

stroke:該屬性指定元素外邊框的外觀。象 fill 一樣,它引用顏料,儘管通常將它指定為一種簡單顏色。

stroke-width:該屬性指定筆劃線的寬度。

stroke-linecap:該屬性確定線末端的形狀,可取的值有粗端(預設值)、圓和正方形。

stroke-linejoin:該屬性確定物件各角的外觀。允許的值有直角(預設值)、圓和斜角,它如示例中所示將尖角的邊緣「剪掉」。

stroke-dasharray:該屬性是乙個整數系列(如 3、2、3、2、4、3、2 和 3),它允許對虛線中每一劃的相對長度進行控制。

stroke-opacity:類似於 fill-opacity,該屬性確定元素筆劃線的相對透明性。

您可以在下面看到這些屬性的一些示例:

<?xml version="1.0"?>

stroke and fill

. . .

. . .

SVG中常用基本形狀教程

svg的基礎形狀矩形 rect 圓 circle 橢圓 ellipse 線段 line 折線 polyline 和多邊形 polygon 本文介紹了svg中這些常用基本形狀的語法及教程。一 矩形 矩形標記允許你建立矩形或它的變體,比如正方形,圓角矩形等。語法如下 x屬性定義了矩形左上角頂點在使用者座...

基本形狀開發 2

2000年12月23日 09 08 00 垂直對齊文字 水平對齊文字 shapesheet 每個形狀都將其屬性儲存在乙個 shapesheet 中。形狀與其 shapesheet 是相同資訊的不同檢視。您對繪圖頁上形狀的每一處更改都會反映在 shapesheet 的 屬性 單元格中。同樣,在 sha...

svg基本使用

svg 檔案可通過以下標籤嵌入 html 文件 或者 矩形rect x,y width height 圓形circle cx,cy cr 橢圓ellipse cx,cy rx ry 線 line x1,y1,x2,y2 折線 polyline points x1,y1 x2,y2 xn,yn 多邊形...