掌握SVG：前端早读精选教你绘制任何图形

xiaoTuiMao
206 阅读5分钟

post-header-bg.png

探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。

  • JS 文章推荐：如何在 SVG 绘制任意图形、NodeJS 实验性 API 支持 Typescript、全栈网络推送 API 指南、如何通过 hack 的方式提升 Lighthouse 评分
  • HTML & CSS 文章推荐：CSS 新的查询方式 -- 容器查询、CSS 锚定语法实践指南
  • 工具推荐：如何利用 cron 在 Linux 中实现定时任务、SVG 绘制可视化工具 -- svg-path-visualizer、利用 canvas 实现彩带效果 -- canvas-confetti

如果觉得有收获，欢迎大家点赞👍🏻订阅

JS 文章推荐

如何在 SVG 绘制任意图形

这篇文章讲述了如何在SVG中进行任意路径的变形动画。作者介绍了SVG路径的基本组成和转换方法，特别是如何将不同类型的绘图命令转换为三次贝塞尔曲线，以便进行动画处理。此外，还讨论了如何通过程序匹配不同路径的点数和结构，以实现两个路径之间的平滑变形。并提供了一个交互式示例来展示这些技术如何实际应用于SVG动画中。

衍生阅读：svg 中的动画标签

标签说明使用 GPU/CPU
<animate>此标签用于基本的属性动画，如改变颜色、大小等CPU
<animateColor>专门用于颜色动画，例如平滑地改变元素的颜色CPU
<animateMotion>允许元素沿着路径移动GPU
<animateTransform>用于动画化变换属性，如旋转、缩放和位移GPU
<set>用于立即设置一个属性值，而不是创建一个动画序列CPU
<discard>虽然不是严格意义上的动画标签，但用于控制元素何时应该被丢弃或停止显示-

image.png

👉🏻原文链接：如何在 SVG 绘制任意图形

NodeJS 增加对TS支持

Node.js 添加了对 TypeScript 的实验性支持。初始实现通过设置实验性标志 --experimental-strip-types 来执行 TypeScript 文件。值得注意的是，NodeJS 对 TypeScript 的支持实现上，是将TypeScript 源代码转译为 JavaScript 源代码，并且在转义过程中不进行类型检查，类型将会被丢弃。关联PR

image.png

👉🏻原文链接：NodeJS 增加对TS支持

全栈网络推送 API 指南

这篇文章是关于如何在一个基于 remix.run的应用中实现完整的Web推送通知系统。详细介绍了创建一个支持推送通知的全栈Web应用的过程，包括 service worker 的设置、前端和后端的订阅管理，以及如何使用 Web 推送 API 和 service worker API 发送通知。文章包含了完整的开发指南和代码示例，帮助开发者从头开始构建或整合到现有的 Remix 应用中。

image.png

👉🏻原文链接：全栈网络推送 API 指南

如何通过 hack 的方式提升 Lighthouse 评分

 文章探讨了 Google Lighthouse 如何计算其性能得分，每个指标在 Lighthouse 中的规则以及影响权重。在规则的基础上如何利用这些信息，通过 Hack 的手段影响 Lighthouse 的评分。

附：指标与权重

MetricWeighting (%)
Total Blocking Time30
Cumulative Layout Shift25
Largest Contentful Paint25
First Contentful Paint10
Speed Index10

image.png

👉🏻原文链接：如何通过 hack 的方式提升 Lighthouse 评分

CSS 文章推荐

CSS 容器查询

CSS 容器查询的主要思想是将一个元素注册为“容器”，并在容器元素满足特定条件时，对其他元素应用样式。例如：

.parent { container-name: hero-banner; container-type: inline-size; } 

.child { display: flex; flex-direction: column; } 
/* 当容器宽度大于 60ch 时应用下面的样式 */ 
@container hero-banner (width > 60ch) { 
	.child { flex-direction: row; } 
}

image.png

👉🏻原文链接：CSS 容器查询

CSS 锚点定位入门指南

这篇文章介绍了 CSS 锚点定位（Anchoring API），包括其基本用法和两种主要方法：使用 anchor() 函数和 inset-area 语法。 总结如下：

  • 锚点定位的基本概念：
    • 锚点定位允许将一个元素的定位基于另一个元素，使用 CSS 的 anchor() 函数和 inset-area 语法。
  • anchor-name 和 position-anchor 属性：
    • anchor-name 用于定义一个元素的锚点名称。
    • position-anchor 用于将另一个元素的定位锚定到指定的 anchor-name。
  • 回退选项 position-try-options：
    • 提供多个回退选项，确保在视口中尽量保持元素可见。
    • 选项包括 normal、contain 和 center 等。
  • 自定义回退选项 @position-try：
    • 可以定义多个尝试定位的策略，指定不同的定位方案和优先级。

注意，当前浏览器支持情况并不友好。

image.png

👉🏻原文链接：CSS 锚点定位入门指南

工具推荐

如何利用 cron 在Linux中实现定时任务

文章介绍了在Linux系统中如何使用cron和crontab进行任务计划。Cron是一个基于时间的作业调度程序，可用于定期执行命令或脚本。

能力具体操作
创建cron作业使用命令crontab -e编辑用户的crontab文件
管理cron作业列出当前用户的cron作业crontab -l
删除cron作业使用命令crontab -r删除用户的crontab文件
设置系统级cron作业直接编辑/etc/crontab文件添加作业
调试cron作业检查cron作业日志，确认环境变量和路径设置

image.png

👉🏻原文链接：如何利用 cron 在Linux中实现定时任务

svg-path-visualizer

将绘制 SVG 的参数可视化，通过参数与绘制结果一一映射解析，帮助你快速了解 SVG path 语法对应的渲染表现。 image.png

👉🏻原文链接：svg-path-visualizer

canvas-confetti

🎉 浏览器中的高性能彩带动画。confetti 接受一个可选的对象。支持 Promise 时返回 Promise。不支持时返回 null。如果在 confetti 完成之前多次调用它，每次都会返回相同的 Promise。在内部，将重用同一个画布元素，继续现有的动画并添加新的彩屑。每次调用 confetti 返回的 Promise 一旦所有动画完成就会被解析。

confetti.gif

👉🏻原文链接：canvas-confetti

avatar
文章
阅读
粉丝