定義可重用部件
第 1 頁（共5 頁）
通常在 svg 影象的構建中，各部分或者是可重用的，或者不便於在影象主體內定義。在這些情況下，通常方便的做法是在文件的定義部分內（作為元素的一部分）通過給這些部分指定以後可在影象主體中呼叫的標識來建立它們。
xml **
xmlversion="1.0"
?>
"">
<
svgwidth="400"
height="200"
xmlns=""
>
<
desc
>referenced itemsdesc
>
<
defs
>
<
polygon
id="lens"
points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="none"
stroke="purple"
stroke-width="4"
/>
<
radialgradient
id="irisgradient"
>
<
stop
offset="25%"
stop-color="green"
/>
<
stop
offset="100%"
stop-color="dodgerblue"
/>
radialgradient
>
defs
>
<
g>
. . .
將定義的項作為屬性使用
第 2 頁（共5 頁）
如前一頁中定義的多邊形和漸變，預定義項的實際用法通常有兩種形式。
在這兩種形式下，定義的項都通過其本地 url（或 uri）引用。象 html 頁面一樣，id屬性建立了文件中的乙個引用點。舉例說來，這意味著 uri#irisgradient引用標識為irisgradient的文件部分（或漸變定義）。即：可以從圓元素的fill屬性內部引用它。
<
circle
cx="125"
cy="50"
r="25"
fill="url(#irisgradient)"
/>
請注意url()函式的使用。
最終**在本節最後一頁顯示。請注意漸變現在用於眼睛的虹膜：
將定義的項作為元素使用
第 3 頁（共5 頁）
xml **<
u***link:href="#lens"
/>
使用定義中提供的座標將多邊形放置在頁面上。
其次，請注意元素在以這種方式使用時成為了乙個可以擁有自己座標系統的容器。座標系統在座標系統和初始觀察口（viewport） 一節中討論，不過您可以看到乙個具體的示例：第二個鏡片最初用初始座標 (190, 50) 建立，也就是相對第乙個鏡片偏移 125 個畫素。而元素
<
u***link:href="#lens"
x="125"
/>
在其原始位置建立第二個鏡片，因為它相對於它的「容器」偏移了 125 畫素。
編組元素
第 4 頁（共5 頁）
最後，svg 不僅僅可以定義單個元素，這一點或許可以從前面討論的元素猜測出來。
為兼顧可讀性和方便性，將元素安排在一組中通常是個好辦法。針對這一目的，svg 提供元素，它建立乙個可以將元素置於其中的容器。這個容器可以用來標識元素，或提供乙個公共屬性（本地定義的屬性將會覆蓋公共屬性）。例如**
. . .
<
gstroke="red"
stroke-width="3"
>
<
ellipse
cx="125"
cy="50"
rx="50"
ry="25"
fill="none"
stroke="black"
/>
<
circle
cx="125"
cy="50"
r="25"
fill="url(#irisgradient)"
/>
<
circle
cx="125"
cy="50"
r="10"
fill="black"
/>
g>
. . .
建立乙個所有筆劃都是 3 個畫素寬的眼睛（因為沒有元素定義筆劃寬度），而除了外邊框筆劃外所有筆劃都是紅色（因為橢圓定義了筆劃顏色）。
組成整體
第 5 頁（共5 頁）
最終的文件顯示各部分是如何新增的：
xml **xmlversion="1.0"
?>
"">
<
svgwidth="400"
height="200"
xmlns=""
xmlns:xlink=""
>
<
desc
>reusing itemsdesc
>
<
defs
>
<
polygon
id="lens"
points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="none"
stroke="purple"
stroke-width="4"
/>
<
radialgradient
id="irisgradient"
>
<
stop
offset="25%"
stop-color="green"
/>
<
stop
offset="100%"
stop-color="dodgerblue"
/>
radialgradient
>
<
gid="eye"
>
<
ellipse
cy="50"
rx="50"
ry="25"
fill="none"
stroke="black"
/>
<
circle
cy="50"
r="25"
/>
<
circle
cy="50"
r="10"
fill="black"
/>
g>
defs
>
<
g>
<
u***link:href="#eye"
x="125"
fill="url(#irisgradient)"
/>
<
u***link:href="#eye"
x="250"
fill="dodgerblue"
/>
<
u***link:href="#lens"
/>
<
u***link:href="#lens"
x="125"
/>
<
line
x1="65"
y1="50"
x2="310"
y2="50"
stroke="plum"
stroke-width="2"
/>
g>
svg>
請注意可重用元素也允許每次使用不同的屬性值，正如上面虹膜的例子中的填充屬性所示。
React入門教程（二）
react基礎總結 續 示例 commentbox react createclass hello,world i am a commentbox.reactdom render react createelement commentbox null document getelementbyid ...
Docker 入門教程（二）
首先，讓我們通過下面的命令來檢查docker的安裝是否正確 docker info 如果沒有找到這條命令，則表示docker安裝錯誤。如果安裝正確，則會輸出類似下面的內容 到 這一步docker裡還沒有映象或是容器。所以，讓我們通過使用命令預先構建的映象來建立來乙個 sudo docker pull...
Robotframework 入門教程（二）
變數 rf用 分別表示標量，列表，和字典，對應的就是python中的sre，list和dict。rf中variables用來建立變數。修改我們的demo.robot如下,對應於python的語法 var value list1 a b c var dict1 variables value a b ...