Cet article comprend principalement viewprot et viewbox en svg;
<svg class="logo" width="100" height="100" viewBox="10 0 50 50">
在页面中定义一个 宽100 高100 的窗口，也就是viewport；
viewbox="x, y, width, height"
x:左上角开始的横坐标点
y:左上角往下的纵坐标点
width: viewbox的宽度
height: viewbox的高度Plus le x est grand, plus la position de l'image est vers la gauche, plus le y est grand, plus la position de l'image est élevée. Ici, nous devons faire attention à la taille de la fenêtre de la fenêtre que nous avons définie, l'image ne sera pas affichée après le dépassement de la fenêtre.
(Image: c'est le contenu dessiné dans le chemin, voici l'icône twitter)
<svg width="100" height="100" viewbox="0 0 50 50"></svg>
这句代码的意思是：
1：在 宽100 高100的区域 中 左上角 （0 , 0 ）坐标处为顶点，画出一个 50 * 50 的 viewbox；
2：将viewport 中 宽50 高50 的内容截图；
3：把截图的图像平铺显示在 宽100 高100 的 viewprot中。Voyant cela, nous pouvons comprendre pourquoi il dit: "Plus le x est grand, plus la position de l'image est à gauche"; parce que x est l'abscisse, plus le x est grand, plus à droite de la zone de capture d'écran, et plus l'image s'affiche dans la zone de capture d'écran. À gauche, la position de l'image affichée dans le panneau d'affichage est plus à gauche.
Comme le montre la figure, 100 * 100 dans la zone d'affichage correspond à la taille de la fenêtre de la fenêtre.
当设置 viewbox中的 width 和 height 越大时，图像显示越小，因为所画图像在页面中显示的比例是一定的，当截取的宽度和高度越大，图像在viewbox中的比例就越小，显示的内容就越小。
不管width和height怎么设置，图像都是保持比例的。设置 坐标和宽高只能移动图像位置和缩放比例，不能改变图像。