3. svg學習筆記-基本形狀和畫筆屬性

時間 2019-12-09

標籤 svg 學習筆記基本形狀畫筆屬性简体版

原文原文鏈接

svg中能夠繪製的基本圖形有線段，矩形，多邊形，圓，橢圓，分別來看一下這些基本圖形：html

線段

使用<line>元素建立一條線段，格式以下：瀏覽器

<line x1=" start-x " y1=" start-y " x2=" end-x " y2=" end-y " stroke="black">

其中start-x和start-y爲線段起點的x，y座標，end-x和end-y爲線段結束點的x，y座標。svg

示例以下：spa

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000000">
        <line x1="10" y1="10" x2="200" y2="200" stroke="black">
        </line>
    </svg>
</body>
</html>

以上代碼在瀏覽器中顯示以下：code

以上代碼中<line>元素除了自身的基本屬性以外還有個stroke屬性，此屬性用來指定基本圖形的輪廓顏色，若不指定，默認爲none，即在瀏覽器中沒法看到所繪製的圖形。除此以外，相似的屬性還有stroke-width，stroke-opacity，stroke-dasharray，fill等，此類屬性之後本文結尾時會詳解，此處只是用來將圖形顯示出來htm

矩形

使用<rect>元素繪製一個矩形，格式以下：blog

<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h"></rect>

其中x，y屬性爲矩形左上角頂點的x，y座標，width和height分別指定矩形的寬高ip

示例以下：ci

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <rect x="30" y="50" width="100" height="60" stroke="black" fill="none">
        </rect>
    </svg>
</body>
</html>

在瀏覽器中呈現以下：get

圓角矩形

圓角矩形也使用<rect>元素建立，只不過額外指定了兩個屬性，格式以下：

<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h" rx="rx" ry="ry">
</rect>

屬性rx和ry分別指定了x方向和y方向的圓角半徑，示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="200" height="120" rx="10" ry="60" stroke="black" fill="none">
        </rect>
    </svg>
</body>
</html>

在瀏覽器中呈現以下：

將以上代碼中的svg部分代碼改成下面的代碼：

<svg width="300" height="300" style="border:1px solid black">
    <rect x="30" y="50" width="200" height="120" rx="10" ry="10" stroke="black" fill="none">
    </rect>
</svg>

在瀏覽器中呈現以下：

圓

在svg中使用<circle>元素建立一個圓，格式以下：

<circle cx="cx" cy="cy" r="radius" ></circle>

cx和cy分別指定了圓心座標的x和y，r元素指定了圓的半徑。示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <circle cx="100" cy="100" r="60" stroke="black" fill="none"> 
        </circle>
    </svg>
</body>
</html>

在瀏覽器中呈現以下：

橢圓

在svg中建立橢圓使用<ellipse>元素，只不過橢圓有兩個半徑，水平方向上的和垂直方向上的，格式以下：

<ellipse cx="circle-x" cy="circle-y" rx=" x-radius " ry="y-radius"></ellipse>

其中cx和cy爲橢圓的圓心，rx和ry爲水平方向和垂直方向上的半徑。示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <ellipse cx="100" cy="100" rx="60" ry="90" stroke="black" fill="none"> 
        </ellipse>
    </svg>
</body>
</html>

在瀏覽器中呈現以下：

多邊形

svg中最有魅力的就是多邊形和路徑了，CSS3再牛逼也沒有辦法像svg同樣如此簡單的建立一個任意的多邊形，在svg中經過<polygon>元素建立一個多邊形，格式以下：

<polygon points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polygon>

經過爲points屬性指定多個座標點來建立一個多邊形，座標點之間以空格或者逗號隔開，指定座標時不須要指定返回起始座標，圖形會自動閉合。

示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <polygon points="10,150 30,40 170,50 10,20" stroke="black" fill="none">        
        </polygon>
    </svg>
</body>
</html>

在瀏覽器中下呈現以下：

折線

繪製折線的時候能夠經過一系列的<line>元素來建立，可是這樣作會加大閱讀的難度，不利於代碼的維護，因此能夠經過另外一種方法來建立折線，那就是<polyline>元素，格式以下：

<polyline points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polyline >

其中的point元素指定的也是座標點，點之間以空格或者逗號隔開，示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <polyline points="23.5,45 58.2,87.63 34,23.4 200,210" stroke="black" fill="none"></polyline>
    </svg>
</body>
</html>