在 Vue 的项目中，总是看到 svg 的影子，自己还没有用过，这里先小记一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
html, body{ margin: 0; padding: 0; }
</style>
</head>
<body>
<div class="rect" style="margin:30px 0 0 30px;">
<svg width="100%" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255); stroke:rgb(0,0,0); stroke-width:1;"></rect>
</svg>
<svg width="100%" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="100" y="10" width="300" height="100" style="fill:#00f; stroke:red; stroke-width:5; fill-opacity:0.5; stroke-opacity:0.5;"></rect>
</svg>
<svg width="100%" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- opacity 属性定义整个元素的透明值 -->
<rect x="200" y="10" width="300" height="100" style="fill:#00f; stroke:red; stroke-width:5; opacity:0.5;"></rect>
</svg>
<svg width="1000" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- rx 和 ry 属性可使矩形产生圆角(需同时设置) -->
<rect x="300" y="10" width="300" height="100" rx="10" ry="10" style="fill:#00f; stroke:red; stroke-width:5;"></rect>
</svg>
</div>
<div class="circle">
<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- cx、cy设置圆心的x、y坐标，若省略，会被设置为(0,0); r 设置圆的半径 -->
<circle cx="120" cy="110" r="100" style="fill:#ff0; stroke:#f00; stroke-width:5;"></circle>
</svg>
</div>
<div class="ellipse">
<svg width="500" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- cx、cy设置圆心的x、y坐标；rx、ry 设置水平半径、垂直半径 -->
<ellipse cx="120" cy="60" rx="100" ry="50" style="fill:#ff0; stroke:#f00; stroke-width:5;"></ellipse>
</svg>
<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple;"></ellipse>
<ellipse cx="240" cy="75" rx="190" ry="20" style="fill:yellow;"></ellipse>
<ellipse cx="240" cy="50" rx="170" ry="15" style="fill:lime;"></ellipse>
</svg>
</div>
<div class="line">
<svg width="100%" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- x1、y1 设置起点的位置，x2、y2 设置终点的位置 -->
<line x1="20" y1="5" x2="320" y2="45" style="stroke:red; stroke-width:1px;"></line>
</svg>
</div>
<div class="polygon">
<svg width="100%" height="180" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- points 属性定义多边形每个点的 x、y坐标（多边形按照points中定义的位置顺序依次连接，最后一个点自动跟起点相连） -->
<polygon points="50,10 500,10 500,90 50,90" style="fill:#ccc; stroke:#000; stroke-width:1"></polygon>
<polygon points="700,10 640,180 790,60 610,60 760,180" style="fill:#ccc; stroke:blue; stroke-width:1;"></polygon>
<!-- fill-rule 属性 -->
<polygon points="900,10 840,180 990,60 810,60 960,180" style="fill:#ccc; stroke:blue; stroke-width:1; fill-rule: nonzero;"></polygon>
<polygon points="1100,10 1040,180 1190,60 1010,60 1160,180" style="fill:#ccc; stroke:blue; stroke-width:1; fill-rule: evenodd;"></polygon>
</svg>
</div>
<div class="polyline">
<svg width="100%" height="180" xmlns="http://www.w3.org.2000/svg" version="1.1">
<!-- polyline 元素是不连接最后一个点和第一个点的 -->
<polyline points="50,10 500,10 500,90 50,90" style="fill:#ccc; stroke:#000; stroke-width:1"></polyline>
<polyline points="700,10 640,180 790,60 610,60 760,180" style="fill:#ccc; stroke:blue; stroke-width:1;"></polyline>
</svg>
<svg width="100%" height="180" xmlns="http://www.w3.org.2000/svg" version="1.1">
<!-- 手动连接 polyline 的起点与终点 -->
<polyline points="50,10 500,10 500,90 50,90 50,10" style="fill:#ccc; stroke:#000; stroke-width:1"></polyline>
<polyline points="700,10 640,180 790,60 610,60 760,180 700,10" style="fill:#ccc; stroke:blue; stroke-width:1;"></polyline>
</svg>
</div>
<div class="path">
<svg width="100%" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
-->
<path d="M100 90 L150 10 L200 90 Z"></path>
<path d="M300 90 L350 10 L400 90 Z" style="fill:#ccc; stroke:blue; stroke-width:2;"></path>
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
</div>
</body>
</html>demo效果：
其中，fill-rule 属性规定了 svg 的填充规则，取值有 nonzero（默认值），evenodd，inherit，具体可参考如下：
https://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
https://www.w3cplus.com/svg/svg-fill-features.html
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
