溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

SVG畫圖功能如何實現(xiàn)畫出一朵花

發(fā)布時間：2020-10-23 14:58:24 來源：億速云 閱讀：224 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)SVG畫圖功能如何實現(xiàn)畫出一朵花，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

<canvas> 標(biāo)記和 SVG 以及 VML 之間的一個重要的不同是，<canvas> 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。

一、創(chuàng)建一個 XXX.svg文件（該文件，創(chuàng)建了一個紅色的圓）

<?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）使用<embed>標(biāo)簽：被所有主流的瀏覽器支持，并允許使用腳本

注釋：當(dāng)在 HTML 頁面中嵌入 SVG 時使用 <embed> 標(biāo)簽是 Adobe SVG Viewer 推薦的方法！然而，如果需要創(chuàng)建合法的 XHTML，就不能使用 <embed>。任何 HTML 規(guī)范中都沒有 <embed> 標(biāo)簽。

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

pluginspage: 指向下載插件的url

2）使用object標(biāo)簽：html4的標(biāo)準(zhǔn)標(biāo)簽，被所有較新的瀏覽器支持，不允許使用腳本

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

codebase：指向下載插件的url

3)iframe標(biāo)簽：（推薦）

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

三、SVG的形狀

1、矩形<rect width=""  height="" style="">

<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、圓形<circle>

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"/>

這里的橢圓只有一個圓點(diǎn)（ 數(shù)學(xué)的橢圓通常說有兩個焦點(diǎn) ）

cx 屬性定義圓點(diǎn)的 x 坐標(biāo)

cy 屬性定義圓點(diǎn)的 y 坐標(biāo)

rx 屬性定義水平半徑（通過兩個焦點(diǎn)的線的一半）

ry 屬性定義垂直半徑

4、線條<line>

5、多邊形<polygon>

6、折線<polyline>

7、路徑<path>

在<svg>標(biāo)簽中，如果都在一個位置上，后邊的形狀會覆蓋前面的形狀

小花的代碼

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畫圖功能如何實現(xiàn)畫出一朵花

雖然丑了些，總體還是一朵花啦！嘻嘻

總體來說，svg就是用來畫圖的，還可以將各種圖形疊加，形成你自己的圖

關(guān)于SVG畫圖功能如何實現(xiàn)畫出一朵花就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手