两个案例
<svg
id="progress"
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
>
<circle
id="background"
cx="100"
cy="100"
r="90"
fill="none"
stroke="#AEC3DC"
stroke-opacity="0.18"
stroke-width="10"
/>
<circle
id="progressBar"
cx="100"
cy="100"
r="90"
fill="none"
stroke="#0B76F3"
stroke-width="10"
/>
</svg>
<svg
width="1000"
height="1000"
viewBox="0 0 2966 1705"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="planePath"
d="M7 261.215C100.833 216.049 337.6 149.215 534 243.215C779.5 360.715 1145.68 392.344 1457 210.215C1832.5 -9.45825 2295.25 -85.2597 2661 210.215C3246.5 683.215 2967 1995.72 1585.5 1623.22"
stroke="black"
stroke-width="31"
/>
<g id="car">
<path
d="M176.133 36.7656H138.789C137.949 36.7656 137.148 36.4336 136.562 35.8281L102.891 1.47265C102.305 0.867185 101.504 0.535156 100.664 0.535156H36.2891C35.4297 0.535156 34.6094 0.886719 34.0234 1.51172L1.44531 35.8477C0.898437 36.4336 0.585938 37.1953 0.585938 37.9961V86.9023C0.585938 88.6211 1.97266 90.0273 3.71094 90.0273H15.3516C15.3516 101.395 24.6094 110.652 35.9766 110.652C47.3438 110.652 56.6016 101.395 56.6016 90.0273H121.484C121.484 101.395 130.742 110.652 142.109 110.652C153.477 110.652 162.734 101.395 162.734 90.0273H176.133C177.852 90.0273 179.258 88.6406 179.258 86.9023V39.8711C179.238 38.1523 177.852 36.7656 176.133 36.7656ZM35.9766 100.652C30.1172 100.652 25.3516 95.8867 25.3516 90.0273C25.3516 84.168 30.1172 79.4023 35.9766 79.4023C41.8359 79.4023 46.6016 84.168 46.6016 90.0273C46.6016 95.8867 41.8359 100.652 35.9766 100.652ZM62.0898 36.7656H24.0234C21.2891 36.7656 19.8828 33.4844 21.7578 31.5117L42.0898 10.0859C42.6758 9.46094 43.4961 9.10937 44.3555 9.10937H62.1094V36.7656H62.0898ZM113.887 36.7656H72.0898V9.08984H92.8711C93.7109 9.08984 94.5117 9.42187 95.0976 10.0273L116.094 31.4531C118.027 33.4258 116.641 36.7656 113.887 36.7656ZM142.109 100.652C136.25 100.652 131.484 95.8867 131.484 90.0273C131.484 84.168 136.25 79.4023 142.109 79.4023C147.969 79.4023 152.734 84.168 152.734 90.0273C152.734 95.8867 147.969 100.652 142.109 100.652Z"
fill="#0450A1"
/>
</g>
<!-- 动画效果 -->
<animateMotion
href="#car"
dur="6s"
rotate="auto"
repeatCount="indefinite"
>
<mpath href="#planePath"></mpath>
</animateMotion>
</svg>
绘制-矩形 ( rect )
◼ SVG的基本形状
在SVG画布中，如果要想插入一个形状，可以在文档中创建一个对应的元素。
不同的元素对应着不同的形状，并且可以使用不同的属性来定义图形的大小和位置。
SVG所支持的基本形状有：矩形、圆形、椭圆、线条、折线、多边形、路径。
◼ 下面用SVG来绘制一个矩形（rect）
元素会在屏幕上绘制
元素有6 个基本属性可以控制它在屏幕上的位置和形状。
◼ 元素6 个基本属性
x ：矩形左上角的 x 轴位置
y ：矩形左上角的 y轴位置
width ：矩形的宽度
height ：矩形的高度
rx ：圆角的 x 轴方位的半径
ry ：圆角的 y 轴方位的半径 。
绘制-圆形 ( circle )
◼下面用SVG来绘制一个圆形（circle）
元素会在屏幕上绘制一个圆形。
元素有 3 个基本属性用来设置圆形。
◼ 元素3 个基本属性
r ：圆的半径
cx ：圆心的 x轴位置
cy ：圆心的 y轴位置
填充storke
第一种：描边属性（stroke）
◼ stroke 描边属性
stroke = “color”： 指定元素边框填充颜色。
stroke-opacity = “number”：控制元素边框填充颜色的透明度。
stroke-width = “number”：指定边框的宽度。注意，边框是以路径为中心线绘制的。
stroke-dasharray =“number [, number , ….]”: 将虚线类型应用在边框上。
✓ 该值必须是用逗号分割的数字组成的数列，空格会被忽略。比如 3，5 :
➢ 第一个表示填色区域长度为 3
➢ 第二个表示非填色区域长度为 5
stroke-dashoffset：指定在dasharray模式下路径的偏移量。
✓ 值为number类型，除了可以正值，也可以取负值。
animateMotion元素
◼ < animateMotion > 定义了一个元素如何沿着运动路径进行移动。
动画元素的坐标原点，会影响元素运动路径，建议从（0, 0）开始。
要复用现有路径，可在元素中使用元素。
◼ < aniamteMotion >元素常用属性：
path：定义运动的路径，值和< path >元素的 d 属性一样，也可用 href 引用 一个 。
rotate ：动画元素自动跟随路径旋转，使元素动画方向和路径方向相同，值类型：<数字> | auto | auto-reverse; 默认值：0
动画值属性： from、to 、values
动画时间属性： begin、dur、fill、repeatCount
SVG 优点
◼ 扩展好： 矢量图像在浏览器中放大缩小不会失真，可被许多设备和浏览器中使用。而光栅图像（PNG 、JPG）放大缩小会失真。
矢量图像是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小是不会失真的。
光栅图像是由像素点构建的图像——微小的彩色方块，大量像素点可以形成高清图像，比如照片。图像像素越多，质量越高。
◼ 灵活： SVG是W3C开发的标准，可结合其它的语言和技术一起使用，包括 CSS、JavaScript、 HTML 和 SMIL 。SVG图像可以
直接使用JS和CSS进行操作，使用时非常方便和灵活，因为SVG也是可集成到 DOM 中的。
◼ 可以动画： SVG 图像可以使用 JS 、 CSS 和 SMIL 进行动画处理。对于 Web 开发人员来说非常的友好。
◼ 轻量级： 与其它格式相比，SVG 图像的尺寸非常小。根据图像的不同，PNG 图像质量可能是 SVG 图像的 50 倍。
◼ 可打印： SVG 图像可以以任何分辨率打印，而不会损失图像质量。
◼ 利于SEO： SVG 图像被搜索引擎索引。因此，SVG 图像非常适合 SEO（搜索引擎优化）目的。
◼ 可压缩： 与其它图像格式一样，SVG 文件支持压缩。
◼ 易于编辑： 只需一个文本编辑器就可以创建 SVG 图像。设计师通常会使用 Adobe Illustrator （AI）等矢量图形工具创建和编辑。
SVG 缺点
◼ 不适和高清图片制作
SVG 格式非常适合用于徽标和图标（ICON）等 2D 图形，但不适用于高清图片，不适合进行像素级操作。
SVG 的图像无法显示与标准图像格式一样多的细节，因为它们是使用点和路径而不是像素来渲染的。
◼ SVG 图像变得复杂时， 加载会比较慢
◼ 不完全扩平台
尽管 SVG 自 1998 年以来就已经存在，并得到了大多数现代浏览器（桌面和移动设备）的支持，但它不适用于 IE8 及更低版
本的旧版浏览器。根据caniuse的数据，大约还有 5% 的用户在使用不支持 SVG 的浏览器。
大屏
认识大屏
◼ 在开发网页时，我适配最多的屏幕尺寸是：
PC端电脑：1920px * 1080px （当然也有少部分电脑是支持输出4k屏， 比如：小米笔记本等）
移动设备： 750px * auto
◼ 那什么是大屏设备
在我们的生活中，经常会见到一些比较大的屏幕，比如：指挥大厅、展厅、展会中的大屏。这些设备就可以称之为大屏设备，
当然19201080 和 38402160（4k 屏 ）也可以说是属于大屏。
◼ 大屏的应用场景
通常用在数据可视化，借助于图形化手段，清晰有效地传达与沟通信息
✓ 比如用在：零售、物流、电力、水利、环保、交通、医疗等领域。
◼ 大屏的硬件设备的分类：
拼接屏、LED屏、投影等。
大屏设备-拼接屏
◼ 拼接屏
顾名思义就是很多屏幕按照一定拼接方式拼接而成。
✓ 其实可以理解成是由很多电视（显示屏）拼接而成。
✓ 常见的使用场景有指挥大厅、展厅、展会等等。
◼ 拼接方式取决于使用场景的需求，如下例子：
1920px * 1080px，即 1 * 1 个 显示屏（16 : 9）
3840 * 2160（4k 屏 ），即 2 * 2 个显示屏（16 : 9）
5760 * 3240，即 3 * 3 个显示屏（16 : 9）
7680 * 3240，即 4 * 3 个显示屏（64 : 27）
9600 * 3240，即 5 * 3 个显示屏（80 : 27）
◼ LED屏
LED 也是现在大屏中常用的硬件，它是由若干单体屏幕模块组成的，它的像素点计算及拼接方式与拼接屏有很大区别。
LED 可以看成是矩形点阵，具体拼接方式也会根据现场实际情况有所不同，拼接方式的不同直接影响到设计的尺寸规则。
LED 屏有很多规格，各规格计算方法相同。
✓ 比如，我们用单体为 500 * 500 的作为标准计算，每个单体模块像素点横竖都为 128px
✓ 如右图，横向 12 块竖向 6 块，横向像素为 12812=1536px，竖向 1286=768px。可以使用横竖总像素去设计。
✓ 最终算出的屏幕尺寸：1536px * 768px
定设计稿尺寸 -拼接屏
◼ 拼接屏
大多数屏幕分辨率是 19201080。当然也会有一些大屏，比如63的拼接屏，横向分辨率为 6*1920=11520px。竖向分辨率为
3*1080=3240px。设计可以按照横竖计算后的总和（11520px * 3240px）作为设计尺寸。
这种尺寸过大的就不太适合按原尺寸设计，那怎么判断什么时候可以按照总和设计，什么时候最好不要按照总和设计。这有一个关键
的节点 4K，超过 4K 后现有硬件会产生很多问题，例如：卡顿，GPU 压力过大，高负荷运行等等。
正常设计建议最好是保持在 4K 内，由于硬件问题，所以现在大家采用的都是输出 4K 及以下，既保证流畅度又能在视觉上清晰阅读。
所以设计时也要保持同样的规则。保持大屏的比例等比缩放即可。
注：最好是按照硬件的输出分辨率设计（关键），因为按照输出分辨率设计，一定不会出错。
◼ 比如
1920px * 1080px（1*1），设计搞尺寸 ：1920px * 1080px 。
3840 * 2160（2*2 4k 屏 ），设计搞尺寸 ： 3840 * 2160 。
5760 * 3240（3*3），设计搞尺寸 ： 5760 * 3240 。
7680 * 3240（4*3），设计搞尺寸 ： （ 3840 * 1620 需要出 1倍图 和 2倍图， 7680 * 3240 ）
9600 * 3240（5*3），设计搞尺寸 ： 比如：4800 * 1620，需要出 1倍图 和 2倍图
......
定设计稿尺寸 -LED屏
◼ LED屏
LED 大屏是由若干单体屏幕模块组成的，LED 屏有很多规格，但是规格计算方法相同。
比如：我们用单体为 500 * 500 的作为标准计算，每个单体模块像素点横竖都为 128px。
如图横向 12 块竖向 6 块，横向像素为 12812=1536px，竖向 1286=768px。可以使用横竖总像素去设计。
此处规则和之前的拼接屏一样，如果超过 4K 像素时可以等比缩放，建议尽量保持在 4k 及以下。
◼ 比如
1536px * 768px，设计搞尺寸 ： 1536px * 768px 。
4608 * 3072，设计搞尺寸 ： 4608 * 3072 。
9216 * 6144，设计搞尺寸 ：
✓ 比如：4608 * 3072，需要出 1倍图 和 2倍图
设计稿尺寸-移动端大屏
◼ 大屏设计稿尺寸的总结：
设计尺寸建议按照输出分辨率设计（重点）
拼接后像素在 4k 左右直接按照总和设计就行
总和设计建议不要超过 4k，可以按比例缩小设计搞（非固定，超过也是可以，只是强烈建议）
建议定设计搞尺寸前，先了解硬件及信号输入输出，确定设计搞的尺寸。
特殊尺寸，需到现场调试最佳设计搞的尺寸。
◼ 大屏适配方案的总结：
特殊尺寸不要考虑适配电脑屏幕又适配拼接屏，因为完全没有必要，也不可能一稿既适配电脑也适配各种尺寸大屏。
这种情况应该优先考虑目标屏幕的适配，要针对性设计，而在小屏根据等比例缩放显示，这才是最佳的解决方法。
大屏适配方案
◼ 大屏的幕尺寸通常也是非常多的，很多时候我们是希望页面在不同的屏幕尺寸上显示不同的尺寸，那大屏的适配方案有哪些？
方案一：百分比设置；
方案二：rem 单位 + 动态设置 html 的 font-size；
方案三：vw 单位；
方案四：flex 弹性布局；
方案五：scale 等比例缩放（推荐）
方案六：grid布局
