本篇文章带大家了解一下SVG，了解一下HTML5 SVG元素的特性，介绍一下使用SVG绘制自适应菱形的方法，你可能不需要png图片了，希望对大家有所帮助！
最近在某思看到这样一个问题：需要绘制一个自适应尺寸的菱形，并且还有边框，一般在流程图中很常见，效果如下
如果没有边框的话，用CSS clip-path也能很方便的裁剪出一个菱形，但是边框不太好处理（通常用嵌套一层的方式或者投影来模拟，但是效果不太好），这里介绍一个 SVG 方式，充分利用缩放特性来实现这样一个效果
一、SVG 从何而来
SVG 通常都不需要手写代码（除少量基本形状以外），一般都可以用设计软件生成（SVG 在设计之初就是给机器看的，非常不利于人工阅读）。比如，我这里是用 Figma 绘制的（一个多边形就搞定），随便什么尺寸都行
然后就得到了这样一段 SVG
<svgwidth="167"height="90"viewBox="0016790"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M2.1078645L83.51.13597L164.89245L83.588.864L2.1078645Z"fill="#FFECC7"fill-opacity="0.6"stroke="#FFB200"stroke-width="2"/></svg>
在浏览器中效果如下
二、SVG 的缩放特性
现在 SVG 有一个默认尺寸，如果手动改变 SVG 的默认尺寸，如下
是不是有点类似于object-fit:contain的效果？如果想整个铺满，强制拉伸该怎么做呢？这里需要用到 SVG 的缩放属性preserveAspectRatio，表示当 SVG 的实际尺寸和viewBox尺寸不一致时的缩放规则，有点类似于object-fit和object-position组合。这里的取值非常多，默认值是xMidYMid，表示强制等比缩放，并且居中对齐。
这里我们不需要等比缩放，可以直接设置为none
<svgpreserveAspectRatio="none">…</svg>
效果如下
三、SVG 的描边缩放
在设置不等比缩放后，其实描边还有一点小问题，不同尺寸下，描边的粗细不同，如下
有没有办法让描边不会跟随 SVG 尺寸缩放呢？当然也是有的！SVG 中有一个属性vector-effect可以控制描边不缩放，永远保持默认设置的尺寸，有兴趣的可以参考这篇文章CSS vector-effect与SVG stroke描边缩放，这里只需要在path添加属性vector-effect="non-scaling-stroke"就行了，表示描边不跟随缩放，如下
<svgpreserveAspectRatio="none"><pathvector-effect="non-scaling-stroke">…</path></svg>
这样就实现了一个自适应尺寸的菱形了，描边也不会缩放，完整 SVG 代码如下
<svgwidth="100%"height="100%"preserveAspectRatio="none"viewBox="0016790"fill="none"xmlns="http://www.w3.org/2000/svg"><pathvector-effect="non-scaling-stroke"d="M2.1078645L83.51.13597L164.89245L83.588.864L2.1078645Z"fill="#FFECC7"fill-opacity="0.6"stroke="#FFB200"stroke-width="2"/></svg>四、SVG 内联 base64
通常情况下，这样一个图形用作背景图更为合适（SVG代码放在页面上不太美观）。让人惊讶的是，将 SVG 转换成 base64 后，以上特性仍然是存在的。这里使用张鑫旭老师的SVG在线压缩合并工具，如下
转换后，将这段 base64 直接用作背景就行
div{background:url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')}
这样就得到了一个自适应的菱形背景了
当然，转换成 base64 后就不能实时修改颜色了，需要整体替换
完整代码可以访问SVG diamond （https://codepen.io/xboxyan/pen/abVRwmz）
五、总结一下
从这个例子就可以看出 SVG 的天然优势了，特别是描边的缩放特性，如果用 CSS 来绘制估计要遇到不少麻烦。这里总结一下实现要点：
SVG 一般通过设计软件绘制导出就行，不需要手写
SVG 默认是保持原比例缩放的，可以通过 preserveAspectRatio 修改缩放规则
SVG 描边的粗细默认会跟随整体尺寸缩放，可以通过 vector-effect 设置保持原始大小
SVG 在转成 base64 后仍然具备以上特性，更适合用作背景图片
SVG 一直在图形绘制上更具优势，特别是这类几何图形，缩放、自适应更加灵活，如果 CSS 实现有困难，不妨考虑一下 SVG。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/30731.html；
