在Web开发中，矢量图形是非常重要的一部分。矢量图形通常用于绘制可缩放的图形，如图标、图表和地图等。在Web开发中，有两种主要的方式来创建矢量图形: 一种是使用CSS vector-effect 属性，另一种是使用SVG stroke 属性。
CSS vector-effect 属性
vector-effect 是一个CSS属性，它指定了应该如何呈现矢量图形。默认情况下，矢量图形会以精确的像素值进行渲染，但这在某些情况下可能不是最理想的方式。例如，在一个高DPI屏幕上，矢量图形可能会显得非常小，因为像素密度比普通屏幕高得多。
此时，我们可以使用 vector-effect 属性来解决这个问题。它有三个可能的值:
none- 矢量图形将被呈现为没有任何特殊效果的“纯粹”图形。non-scaling-stroke- 矢量图形的边框大小将不随着缩放而改变。non-scaling-size- 矢量图形的尺寸将不随着缩放而改变。
下面是一个简单的例子，展示了如何使用 vector-effect 属性来解决高DPI屏幕上矢量图形缩小的问题:
<!DOCTYPE html>
<html>
<head>
<style>
svg {
width: 200px;
height: 200px;
border: 1px solid black;
}
path {
vector-effect: non-scaling-stroke;
stroke: red;
stroke-width: 10;
}
</style>
</head>
<body>
<svg viewBox="0 0 100 100">
<path d="M 10,50 A 40,40 0 1,1 90,50" />
</svg>
</body>
</html>
在这个例子中，我们创建了一个SVG路径，并将其包裹在一个<svg> 标签中。我们在样式表中使用 vector-effect 属性，并将其设置为 non-scaling-stroke。这告诉浏览器，无论如何缩放该元素，其描边宽度都应该保持不变。结果，即使在高DPI屏幕上，我们仍然可以获得一个漂亮的红色圆弧。
SVG stroke 属性
stroke 属性用于定义一个形状边框的颜色。它可以与SVG path、line、rect 等元素一起使用。除了颜色之外，还可以通过 stroke-width 属性来设置描边的宽度。
然而，与CSS vector-effect 属性相比，SVG stroke 属性不能直接实现描边缩放效果。当我们缩小一个矢量图形时，描边大小也随之变小。这可能不是理想的效果。
为了解决这个问题，我们可以使用SVG的 preserveAspectRatio 属性。这个属性是由 viewBox 属性和 width 和 height 属性组成的。 viewBox 定义了一个固定的坐标系，可以在其中呈现元素。 width 和 height 定义了视区的宽度和高度。当我们改变 width 或 height 值时，SVG图形的大小会改变。
但是，如果我们希望在改变视区大小的同时保持描边大小不变，该怎么办？这就需要使用到 preserveAspectRatio 属性了。
<svg viewBox="0 0 100 100" width="200" height="200" preserveAspectRatio="none">
<path d="M 10,50 A 40,40 0 1,1 90,50" stroke="red" stroke-width="10" />
</svg>
在上面的代码中，我们定义了一个SVG路径元素，并将其包裹在一个 <svg> 标签中。我们将 viewBox 设置为 "0 0 100 100"，并将 width 和 height 分别设置为 200。然后，我们添加了一个 preserveAspectRatio="none" 属性，告诉浏览器我们不想保留长宽比。这就允许我们改变视区的大小，而不影响描边的大小。
描边缩放
现在我们已经了解了如何使用CSS vector-effect 属性和SVG stroke 属性来实现可缩放的矢量图形。但是，如果我们需要同时实现描边缩放的效果时，该怎么办？
幸运的是，我们可以将这两种技术结合起来实现描边的缩放。下面是一个例子:
<!DOCTYPE html>
<html>
<head>
<style>
svg {
width: 200px;
height: 200px;
border: 1px solid black;
}
path {
vector-effect: non-scaling-stroke;
stroke: red;
stroke-width: 10;
}
.wrapper {
width: 400px;
height: 400px;
position: relative;
}
.wrapper svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<svg viewBox="0 0 100 100">
<path d="M 10,50 A 40,40 0 1,1 90,50" />
</svg>
</div>
</body>
</html>
在这个例子中，我们创建了一个包含SVG图形的 div 元素，并将其设置为400x400像素的高度和宽度。然后，我们使用CSS布局技巧，将SVG元素绝对定位到该元素中，并将其宽度和高度设置为100%。
然后，我们添加了一个 vector-effect: non-scaling-stroke 属性，告诉浏览器描边大小应该保持不变。作为最后一步，我们将外层 div 元素的大小设置为 200x200 像素，以实现缩小效果。
现在，通过结合使用 vector-effect 和 preserveAspectRatio 属性，我们可以轻松地创建一个可缩放的矢量图形，并保持描边大小不变。这使得我们可以轻松地在各种设备上呈现高质量的图形，而无需担心像素密度或分辨率的变化。
