SVG畫圖功能：svg實作畫出一朵花（附程式碼）-H5教程-PHP中文網

SVG畫圖功能：svg實作畫出一朵花（附程式碼）

不言

發布： 2018-08-08 11:10:41

原創

4146 人瀏覽過

這篇文章帶給大家的內容是關於SVG畫圖功能：svg實現畫出一朵花（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、建立一個XXX.svg文件（該文件，創建了一個紅色的圓）

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

登入後複製

SVG使用XML編寫，並儲存為.svg檔。該.svg檔案必須在.html檔案中被引用

#二、svg in HTML

1）使用

標籤：

被所有主流的瀏覽器支持，並允許使用腳本註解：當在HTML 頁面中嵌入SVG 時使用標籤是Adobe SVG Viewer 推薦的方法！然而，如果需要建立合法的 XHTML，就不能使用。任何 HTML 規範中都沒有標籤。

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

登入後複製

pluginspage: 指向下載插件的url

2）使用object標籤：

html4的標準標籤，被所有較新的瀏覽器支持，不允許使用腳本

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

登入後複製

codebase：指向下載插件的url

3)iframe標籤：（建議）

<iframe src="rect.svg" width="300" height="100">
</iframe>

登入後複製

三、SVG的形狀

1、矩形

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

登入後複製

style 屬性用來定義CSS 屬性

stroke-width 屬性定義矩形邊框的寬度

stroke 屬性定義矩形邊框的顏色

2、圓形

#3、橢圓< ;ellipse>

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

登入後複製

這裡的橢圓只有一個圓點（數學的橢圓通常說有兩個焦點）

cx 屬性定義圓點的x 座標

#cy 屬性定義圓點的y 座標rx 屬性定義水平半徑（透過兩個焦點的線的一半）

ry 屬性定義垂直半徑4、線條

5、多邊形

6、折線

7、路徑

在

小花的程式碼

flower.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <circle cx="90" cy="90" r="30" fill="red" />

    <circle cx="150" cy="90" r="30" fill="yellow" />

    <circle cx="120" cy="60" r="30" fill="blue" />

    <circle cx="120" cy="120" r="30" fill="green" />
    <circle cx="120" cy="90" r="15" fill="pink"/>

    <line x1="120" y1="150" x2="120" y2="250"
    style="stroke:rgb(100,55,69);stroke-width:2"/>

    <ellipse cx="90" cy="190" rx="40" ry="10"
             style="fill:lime"/>
    <ellipse cx="150" cy="225" rx="40" ry="10"
             style="fill:lime"/>
</svg>

登入後複製

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="flower.svg" width="100%" height="600" style="padding: 5px">
</iframe>
</body>
</html>

登入後複製

效果圖

#雖然醜了些，整體還是一朵花啦！嘻嘻######整體來說，svg就是用來畫圖的，還可以將各種圖形疊加，形成你自己的圖片###### 相關文章推薦：######## #HTML標籤：img標籤的用法摘要######### ###svg中元素的使用及marker屬性的介紹######## ###svg如何實現座標系統變換（附程式碼）### ######

以上是SVG畫圖功能：svg實作畫出一朵花（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！