首頁 >web前端 >H5教程 >SVG畫圖功能:svg實作畫出一朵花(附程式碼)

SVG畫圖功能:svg實作畫出一朵花(附程式碼)

不言
不言原創
2018-08-08 11:10:414206瀏覽

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

5ba626b379994d53f7acf72a64f9b697 標籤和 SVG 以及 VML 之間的一個重要的差異是,5ba626b379994d53f7acf72a64f9b697 有一個基於 JavaScript 的繪圖 API,而 SVG 和 VML 使用一個 XML 文件來描述繪圖。

一、建立一個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)使用d8e2720730be5ddc9c2a3782839e8eb6標籤:

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

<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、矩形ad7abde7b0e4ffaa6446c45214066df7

<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、圓形30de22e41cb8eb8fbfdc1f091d85e4be

#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、線條aa8f2a511575cd3db578254dee0687a7

6、折線ce803ba1a4290bddb3ba9c6f57d4c9b4

7、路徑98953a78f52873edae60a617ec082494

 在df5ed2585fa481d2d746913aca27b9e6元素的使用及marker属性的介绍">
<!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中53207a333cb59025d48bd080b9112b21元素的使用及marker屬性的介紹######## ###svg如何實現座標系統變換(附程式碼)### ######

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn