欢迎来到我的公众号：前端大神最近在某思维看到这样一个问题：需要绘制一个自适应大小的菱形，并且有边框，一般很常见在流程图中，效果如下如果没有边框，用cssclip-path可以很容易的切出一个菱形，但是边框不好处理（一般是嵌套图层或者投影来模拟，但是效果不是verygood），这里介绍一种充分利用缩放特性的SVG方法，达到这样的效果。1、SVG从何而来？SVG通常不需要手写代码（少数基本形状除外），一般可以用设计软件生成（SVG一开始设计的时候是给机器看的，非常不利于人的阅读）。比如我这里是用Figma画的（一个多边形就够了），任意大小都可以，然后得到这样一个SVG在浏览器中的效果如下2.SVG的缩放特性现在SVG有一个默认大小。如果手动更改SVG下面的默认大小是不是有点类似于object-fit:contain的效果？想把整个东西都摊开，强行拉长怎么办？这里需要用到SVG的缩放属性preserveAspectRatio，表示当SVG实际尺寸与viewBox尺寸不一致时的缩放规则，有点类似于object-fit和object-position的组合。这里有很多值，默认值为xMidYMid，表示强制缩放，居中。有兴趣的可以参考这篇文章：理解SVGviewport,viewBox,preserveAspectRatio缩放，案例很详细这里我们不需要按比例缩放，可以直接设置为none。..效果如下3.SVGstrokescaling设置不等比例缩放后，stroke其实有个小问题。不同尺寸下，笔画的粗细不同。有什么方法可以防止笔画随SVG大小缩放吗？当然有！SVG中有一个属性vector-effect可以控制笔画不缩放，始终保持默认大小。有兴趣的可以参考这篇文章CSSvector-effectandSVGstrokestrokescaling。这里只需要给路径添加属性vector-effect="non-scaling-stroke"就可以了，表示笔画不跟随缩放，如下...这样就实现了一个自适应大小的菱形，不会缩放stroke。完整的SVG代码如下org/2000/svg">4.SVGinlinebase64Undernormalcircumstances,suchagraphicismoresuitableasabackgroundimage(theSVGcodeisnotverybeautifulonthepage)sothatSurprisingly,afterconvertingSVGtobase64,theabovefeaturesstillexist.HereweuseMr.ZhangXinxu’sonlineSVGcompressionandmergingtool.Afterthefollowingconversion,justusethisbase64directlyasthebackgrounddiv{background:url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')}这样就得到了一个自适应的菱形背景了当然，转换成base64后就不能实时修改颜色了，需要整体替换完整代码可以访问SVGdiamond五,Tosumup,fromthisexample,wecanseethenaturaladvantagesofSVG,especiallythescalingfeatureofthestroke.IfyouuseCSStodraw,youmayencounteralotoftrouble.这里总结一下实现要点：SVG一般可以用设计软件绘制导出。它不需要手写。SVG默认保持原始比例。您可以通过preserveAspectRatio修改缩放规则。默认情况下，SVG描边的粗细将遵循整体大小。您可以使用vector-effectSet来保持原始大小。SVG转base64后仍然具有以上特点，更适合作为背景图片使用。SVG在图形绘制上一直有优势，尤其是对于这样的几何图形，缩放和自适应更加灵活。如果CSS实现困难，请考虑SVG。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
