文章标签

canvas SVG

何时使用 SVG，何时使用 Canvas

SVG 和 canvas 都是可以在网页浏览器中绘制图形的技术，因此它们值得比较和理解何时一种技术比另一种更适合。即使只是对它们有一个简单的了解，也能让你在选择其中一种技术时更容易做出选择……

Chris Coyier 于 2019 年 11 月 12 日

图标系统精灵图 SVG

查看 Sprite 中所有 SVG 的代码片段

我认为 SVG 精灵是这样的

<svg display="none">
  <symbol id="icon-one"> ... </symbol><symbol>
  </symbol><symbol id="icon-two"> ... </symbol><symbol>
  </symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>

我一直很热衷于这种图标系统的方法 (<use></use>-ing 它们)，……

Chris Coyier 于 2019 年 10 月 8 日

剪切路径 CSS 形状链接 SVG

使用 HTML 和 CSS 连接形状和图像的多种方法

不同的网站设计通常需要一个非方形或矩形形状来响应点击事件。也许你的网站有一些倾斜或弯曲的横幅，其中点击区域会由于...而显得过于庞大

Bailey Jones 于 2019 年 10 月 10 日

SVG textPath

在弯曲路径上移动文本

前几天，《纽约时报》上有一篇有趣的文章，描述了伊丽莎白·沃伦和她的工作人员让人们与沃伦自拍的花哨方式。但是...这些照片实际上并不是自拍，因为它们是用...拍摄的

Chris Coyier 于 2019 年 8 月 12 日

path SVG

#172：手动 SVGing 一条曲线

我发现我 98% 的 SVG 使用都是来自预先创建的 SVG 文件或一些设计软件中的矢量艺术，我最终将其导出为 SVG。我并不是经常手动操作 SVG 中的事物的坐标...

Chris Coyier 于 2019 年 8 月 6 日

firefox picture SVG

每周平台新闻：使用 Picture 元素阻止图像加载，我们想要的 Web，Svg 样式不具作用域

在本周的浏览器新闻周报中，我们将介绍使用 picture 元素有条件加载图像的技巧、告诉你如何告诉浏览器厂商你想要的 Web 以及应用于内联 SVG 元素的样式...不...的

Šime Vidas 于 2021 年 4 月 15 日

SVG SVG 过滤器

使用 SVG 制作逼真的玻璃效果

我爱上了 SVG。当然，代码乍一看可能看起来很密集且难以理解，但当你熟悉它之后，你会看到结果中的美感。好处是这些结果是代码，所以它...

David Fitzgibbon 于 2019 年 8 月 1 日

3D canvas SVG

Zdog

David DeSandro 创建了许多非常酷的 JavaScript 库。他最新的作品是 Zdog，它是一个“用于 canvas & SVG 的圆形、扁平、面向设计师的伪 3D 引擎”。自从他发布它以来，它才只有一个月左右（尽管...）。

Chris Coyier 于 2019 年 7 月 24 日

下拉菜单菜单 SVG

带有“动态点击区域”的菜单

飞出菜单！一旦你需要实现一个使用悬停事件来显示更多菜单项的菜单，你就会处于棘手的境地。首先，它们也应该适用于点击和轻触。没有它，你就破坏了...

Chris Coyier 于 2019 年 7 月 3 日