SVG画图描边
2016-12-08 本文已影响305人
卢哎呦
什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
一、SVG绘制圆形--<circle />
circle:绘制圆形标签;
cx/cy:定义圆形中心点;
r:定义圆形半径;
stroke:定义描边颜色;
stroke-Width:定义描边宽度;
fill:定义内填充颜色;
<svg width="100" height="100"> <circle cx="50" cy="50" r="45" stroke="orange" stroke-width="10" fill="#ff5" /></svg>
二 、SVG绘制矩形和圆角矩形--<rect />
rect:绘制矩形标签;
x:矩形的左侧位置,定义矩形到<svg>左侧的距离是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:绘制椭圆标签;
cx:定义椭圆中心的X坐标;
cy:定义椭圆中心的Y坐标;
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:绘制直线标签;
x1:直线起始点X坐标;
y1:直线起始点Y坐标;
x2:直线终止点X坐标;
y2:直线终止点Y坐标;
<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>
总结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>
动态描边
