• 技术文章 >web前端 >html教程

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

    青灯夜游青灯夜游2022-03-30 20:46:54转载1249
    本篇文章带大家了解一下SVG,了解一下HTML5 SVG元素的特性,介绍一下使用SVG绘制自适应菱形的方法,你可能不需要png图片了,希望对大家有所帮助!

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

    1.png

    如果没有边框的话,用 CSS clip-path 也能很方便的裁剪出一个菱形,但是边框不太好处理(通常用嵌套一层的方式或者投影来模拟,但是效果不太好),这里介绍一个 SVG 方式,充分利用缩放特性来实现这样一个效果

    一、SVG 从何而来

    SVG 通常都不需要手写代码(除少量基本形状以外),一般都可以用设计软件生成(SVG 在设计之初就是给机器看的,非常不利于人工阅读)。比如,我这里是用 Figma 绘制的(一个多边形就搞定),随便什么尺寸都行

    2.png

    然后就得到了这样一段 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>

    在浏览器中效果如下

    3.png

    二、SVG 的缩放特性

    现在 SVG 有一个默认尺寸,如果手动改变 SVG 的默认尺寸,如下

    4.png

    是不是有点类似于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>

    效果如下

    5.png

    三、SVG 的描边缩放

    在设置不等比缩放后,其实描边还有一点小问题,不同尺寸下,描边的粗细不同,如下

    6.png

    有没有办法让描边不会跟随 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>

    7.png

    这样就实现了一个自适应尺寸的菱形了,描边也不会缩放,完整 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在线压缩合并工具,如下

    8.png

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

    div{
      background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
    }

    这样就得到了一个自适应的菱形背景了

    9.gif

    当然,转换成 base64 后就不能实时修改颜色了,需要整体替换

    完整代码可以访问 SVG diamond

    https://codepen.io/xboxyan/pen/abVRwmz

    五、总结一下

    从这个例子就可以看出 SVG 的天然优势了,特别是描边的缩放特性,如果用 CSS 来绘制估计要遇到不少麻烦。这里总结一下实现要点:

    SVG 一直在图形绘制上更具优势,特别是这类几何图形,缩放、自适应更加灵活,如果 CSS 实现有困难,不妨考虑一下 SVG。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发

    (学习视频分享:web前端

    以上就是带你了解HTML5 SVG,看看怎么绘制自适应的菱形的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:html5中块状元素怎么转换为其他元素 下一篇:web前端笔试题库之HTML篇
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 如何让WordPress支持上传SVG格式图片并显示在媒体库中• 浅谈网页中提升SVG文件可访问性的几种方法• 详解CSS3+SVG滤镜实现不规则边框的方法• 一文讲解html中怎么使用SVG实现画走势图(分享代码)• 给文字添加渐变、描边、投影效果的两种方式(CSS和SVG)• 手把手教你在vue2中利用svg开发一个环形进度条组件
    1/1

    PHP中文网