带你了解HTML5 SVG,看看怎么绘制自适应的菱形

本篇文章带大家了解一下SVG , 了解一下HTML5 SVG元素的特性 , 介绍一下使用SVG绘制自适应菱形的方法 , 你可能不需要png图片了 , 希望对大家有所帮助!

带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

最近在某思看到这样一个问题:需要绘制一个自适应尺寸的菱形 , 并且还有边框 , 一般在流程图中很常见 , 效果如下
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

如果没有边框的话 , 用 CSS clip-path 也能很方便的裁剪出一个菱形 , 但是边框不太好处理(通常用嵌套一层的方式或者投影来模拟 , 但是效果不太好) , 这里介绍一个 SVG 方式 , 充分利用缩放特性来实现这样一个效果
一、SVG 从何而来SVG 通常都不需要手写代码(除少量基本形状以外) , 一般都可以用设计软件生成(SVG 在设计之初就是给机器看的 , 非常不利于人工阅读) 。 比如 , 我这里是用 Figma 绘制的(一个多边形就搞定) , 随便什么尺寸都行
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

然后就得到了这样一段 SVG
<svg width="167" height="90" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/></svg>在浏览器中效果如下
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

二、SVG 的缩放特性现在 SVG 有一个默认尺寸 , 如果手动改变 SVG 的默认尺寸 , 如下
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

是不是有点类似于object-fit:contain的效果?如果想整个铺满 , 强制拉伸该怎么做呢?这里需要用到 SVG 的缩放属性preserveAspectRatio , 表示当 SVG 的实际尺寸和viewBox尺寸不一致时的缩放规则 , 有点类似于 object-fitobject-position 组合 。 这里的取值非常多 , 默认值是xMidYMid , 表示强制等比缩放 , 并且居中对齐 。
有兴趣的可以参考这篇文章:理解SVG viewport,viewBox,preserveAspectRatio缩放 , 案例非常详细
https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
这里我们不需要等比缩放 , 可以直接设置为none
<svg preserveAspectRatio="none">...</svg>效果如下
【带你了解HTML5 SVG,看看怎么绘制自适应的菱形】
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

三、SVG 的描边缩放在设置不等比缩放后 , 其实描边还有一点小问题 , 不同尺寸下 , 描边的粗细不同 , 如下
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

有没有办法让描边不会跟随 SVG 尺寸缩放呢?当然也是有的!SVG 中有一个属性 vector-effect可以控制描边不缩放 , 永远保持默认设置的尺寸 , 有兴趣的可以参考这篇文章 CSS vector-effect与SVG stroke描边缩放 , 这里只需要在 path添加属性vector-effect="non-scaling-stroke"就行了 , 表示描边不跟随缩放 , 如下
<svg preserveAspectRatio="none"> <path vector-effect="non-scaling-stroke">...</path></svg>
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

这样就实现了一个自适应尺寸的菱形了 , 描边也不会缩放 , 完整 SVG 代码如下
<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg"> <path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/></svg>四、SVG 内联 base64通常情况下 , 这样一个图形用作背景图更为合适(SVG代码放在页面上不太美观) 。 让人惊讶的是 , 将 SVG 转换成 base64 后 , 以上特性仍然是存在的 。 这里使用张鑫旭老师的 SVG在线压缩合并工具 , 如下
带你了解HTML5 SVG,看看怎么绘制自适应的菱形

文章插图

转换后 , 将这段 base64 直接用作背景就行

推荐阅读