什么是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個整體
一、SVG繪制圓形--<circle />
circle:繪制圓形標(biāo)簽;
cx/cy:定義圓形中心點(diǎn);
r:定義圓形半徑;
stroke:定義描邊顏色;
stroke-Width:定義描邊寬度;
fill:定義內(nèi)填充顏色;
<svg width="100" height="100"> <circle cx="50" cy="50" r="45" stroke="orange" stroke-width="10" fill="#ff5" /></svg>
二 、SVG繪制矩形和圓角矩形--<rect />
rect:繪制矩形標(biāo)簽;
x:矩形的左側(cè)位置,定義矩形到<svg>左側(cè)的距離是Xpx;
y:矩形的頂端位置,定義矩形到<svg>頂部的距離是Ypx;
rx/ry:是圓角半徑;
style:
fill:填充顏色;
fill-opacity:填充顏色透明度;
stroke:描邊顏色;
stroke-Width:描邊寬度;
stroke-opacity:描邊透明度;
<svg width="500" height="400">
<rect x="10" y="10" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px;" />
<rect x="10" y="210" rx="50" ry="100" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px; stroke-opacity:.5; fill-opacity:.9;" />
</svg>
三、繪制橢圓--<ellipse />
ellipse:繪制橢圓標(biāo)簽;
cx:定義橢圓中心的X坐標(biāo);
cy:定義橢圓中心的Y坐標(biāo);
rx:定義橢圓的水平半徑;
ry:定義橢圓的垂直半徑;
<svg width="500" height="400">
<ellipse cx="150" cy="100" rx="90" ry="50" stroke="orange" stroke-width="5" fill="#000" fill-opacity=".5" />
<text x="110" y="30" font-size="24" font-weight="bold">SVG橢圓</text>
</svg>
四、SVG繪制直線--<line />
line:繪制直線標(biāo)簽;
x1:直線起始點(diǎn)X坐標(biāo);
y1:直線起始點(diǎn)Y坐標(biāo);
x2:直線終止點(diǎn)X坐標(biāo);
y2:直線終止點(diǎn)Y坐標(biāo);
<svg width="500" height="400">
<line x1="5" y1="5" x2="250" y2="200" style="stroke:rgba(255, 0, 0, .5); stroke-width:5px;" />
<text x="120" y="50" font-size="24" font-weight="bold">SVG直線</text>
</svg>
總結(jié)Demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="./index.css">
<title>SVG</title>
<style type="text/css">
.rect-f{
stroke-dasharray: 10;
animation: dash 1s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 100;
}
}
.rect-s{
stroke-dasharray: 1000; //虛線長度
stroke-dashoffset: 1000; //偏移量
animation: miaobian 2s linear forwards;
}
@keyframes miaobian {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="100" height="100" style="border: 1px solid red; ">
<circle cx="50" cy="50" r="30" stroke="orange" stroke-width="20" fill="#ff5" stroke-opacity="0.3"/>
</svg>
<br>
<svg width="300" height="350" style="border: 1px solid red; ">
<rect class="rect-f" x="20" y="20" width="100" height="100" rx="10" style="fill:#ccc; stroke:orange; stroke-width:10px;" />
<rect class="rect-s" x="10" y="210" rx="50" ry="100" width="200" height="100" style="fill:#ccc; stroke:orange; stroke-width:5px;" />
</svg>
</body>
</html>
動態(tài)描邊
