文章标签

我最近偶然发现了 制造者地图集，该地图集由 Vasilis van Gemert 创建。它有趣且古怪的外观让我查看了其内部结构，并且绝对值得一看！我发现它实际上是通过制作……构建的。

仅仅内联 SVG 似乎是最简单和最灵活的图标系统。但是，这段 <svg></svg> 代码可能包含 <title></title>，并且您可能出于各种原因在这两个元素上都应用了 ID……

<svg viewBox="0 0 100 100">
  <text>
    <tspan class="line-1" textLength="100" x="0" y="1em" font-size="20">
      The Cat
    </tspan>
    <tspan class="line-2" textLength="100" x="0" dy="0.9em" font-size="20" lengthAdjust="spacingAndGlyphs">
      in the
    </tspan>
    <tspan class="line-3" textLength="100" x="0" dy="0.9em" font-size="35">
      Hat
    </tspan>
  </text>
</svg>

SVG 提供了 <tspan></tspan> 标签。……

我之前偶然发现了一些 这样的 动画，这给了我一个想法，即尽可能少地使用代码创建我自己的版本，不使用任何外部库，使用各种方法，其中一些方法利用了更多……

创建网站图标的方法有很多。内联 SVG 可缩放，易于使用 CSS 修改，甚至可以进行动画处理。如果您有兴趣了解有关使用内联 SVG 的优点的更多信息，我建议您阅读……

这里的想法是在按钮中使用 SVG 图标，并在点击按钮时将其替换为另一个图标。按钮点击通常表示已执行操作，因此切换图标可以是一个很好的……

这与其说是代码片段，不如说是对一些我经常查找内容的提醒。在 Adobe Illustrator 中创建 SVG 文件时，有两种不同的导出文件方法。这两种方法都包含一些……

SVG 的 <pattern> 元素允许我们在 SVG 标记内定义图案，并将这些图案用作 fill。图案的基本过程类似于

• 在 SVG 内定义 <pattern>
• 定义形状

我想大家一定不会感到意外，在 Web 上有很多不同的方法可以完成同一件事。形状变形作为 Web 上的一项功能，也不例外。有一些原生技术，一些利用……的库。