SVG画图描边

作者: 卢哎呦 | 来源:发表于2016-12-08 12:08 被阅读305次

SVG画图描边
文字描边效果
[整理]SVG Path Animations
与canvas不同的svg画图
svg描边动画神器stroke
React Native SVG描边动画
3.svg 描边动画
设计思维 - 收藏集 - 掘金
CSS+SVG路径描边特效
使用svg 描边绘制动态文字

什么是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>

动态描边