00、前端图形

前端代码实现图形的几种方式：CSS、SVG、Canvas（主要是JavaScript编码）

CSS也是可以画图的，需要借助于高宽、边框border、clip-path裁剪、渐变色背景等属性来模拟实现各种图形，当然只能实现一些简单的图形。

border：用四条边框样式属性的各种组合变换，实现一些简单的图形。网上也有画一些稍微复杂的图形，如哆啦A梦，但代码量稍多，可读性不好，并不推荐。

<div class="gcss">
  <p class="border">border</p>
  <p class="rborder">圆角按钮</p>
  <p class="radio"></p>radio
  <p class="triangle1"></p>三角形
  <p class="triangle2"></p>三角形
</div>
<style>
  .gcss p {
    display: inline-block;
    text-align: center; vertical-align: middle;
  }
  .border {
    border: 30px solid;
    border-color: aqua tan violet peru;
    border-radius: 20px;
  }        
  .rborder {
    background-color: #b1ccf3;
    width: 100px; height: 40px; line-height: 40px;
    border-radius: 20px;
  }
  .radio {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 10px solid;
  }
  .triangle1 {
    border: 50px solid #0001;
    border-left-color: red;
  }
  .triangle2 {
    border-left: 50px solid #0001;
    border-right: 50px solid #0001;
    border-bottom: 50px solid red;
  }
</style>

01、< svg>矢量图形

< svg>可缩放矢量图形（Scalable Vector Graphics，SVG），是一种基于 XML（数学）描述的二维的矢量图形，内容可以直接插入网页，成为DOM的一部分，然后用 JavaScript 和 CSS 进行操作。SVG 内容也可以写在一个独立文件中，然后用CSS（background-url）、<img>、<object>、<embed>、<iframe>来引用。

大多数现代浏览器都支持SVG 图形，越来越多的项目在使用SVG图形，简单的像图标，复杂的一些图表Chart也有不少是基于SVG实现的。相比于位图，体积更小，可无线缩放而不失真。

1.1、< svg>元素

<svg>内部支持多种图形算法，基础的如线line、圆形<circle>、矩形rect、文本text，复杂的有折线polyline、多边形polygon、路径数据path等。这些图形都以子元素的形式组合，因此也就都支持CSS、JS的操作了。iconfont-阿里巴巴矢量图标库上有非常丰富的< svg>矢量图形。

❗小提示：注意服务器添加对svg的支持，及gzip压缩。

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
	<circle cx="150" cy="100" r="80" fill="green" />
	<circle cx="150" cy="100" r="70" fill="#fff" />                
	<text x="150" y="125" font-size="60" text-anchor="middle" fill="orange">SVG</text>
	<line x1="0" y1="100" x2="300" y2="100" stroke="white" stroke-width="8"/>
</svg>
<svg class="icon" height="200" viewBox="0 0 300 200" version="1.1">
	<rect x="5" y="50" rx="50" ry="50" height="100" width="290" fill="white" stroke="blue" stroke-width="10"/>
	<path d="M 50 5 H250 V195 H50 Z" stroke="red" stroke-width="10" fill="#00000001" />
	<text x="145" y="125" font-size="60" text-anchor="middle" fill="#fab">Path</text>
</svg>
<style>
	svg:hover{
		background-color: aliceblue;
		stroke: red;
		stroke-width: 1px;
		fill: red;
	}
</style>

1.2、动画

SVG 本身就是一个HTML元素，因此动画可以用CSS的动画来实现（参考 CSS动画），SVG中也有专门用于实现动画的<animate>子元素。这里示例采用JavaScript+transform变换实现旋转效果。

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
	<circle cx="150" cy="100" r="80" fill="green" />
	<circle cx="150" cy="100" r="70" fill="#fff" />
	<text class="svgc" x="150" y="125" font-size="60" text-anchor="middle" fill="orange" >SVG</text>
	<line class="svgc" x1="0" y1="100" x2="300" y2="100" stroke="white" stroke-width="8" />
</svg>
<script>
	let svgcs = document.querySelectorAll(".svgc");
	//设置中心点
	svgcs.forEach(element => {
		element.setAttribute("transform-origin", '150 100');
	});
	let deg = 0;
	setInterval(() => {
		deg = deg > 360 ? 0 : deg+4;
		svgcs.forEach(element => {
			element.setAttribute("transform", `rotate(${deg})`);
		});
	}, 100);
</script>
<!-- 用CSS动画实现的版本 -->
<style>
	.svgc {
		transform-origin: 150px 100px;
		animation: svgc-routate 2s linear 1s infinite;
	}
	@keyframes svgc-routate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>

1.3、svg工具/资源/库

标签：动画,Canvas,SVG,前端,ctx,40,图形,border
From： https://www.cnblogs.com/anding/p/16811031.html