分离的简单图案（优于单独使用颜色）

颜色非常适合分离事物。这就是您基本的饼图，不是吗？您可以通过颜色区分不同的扇区。如果颜色对比度足够，您可能没问题，但您可能做得更好（尤其是在无障碍方面），可以使用图案或组合。

Patrick Dillon 处理了饼图问题

使用 SVG 图案增强图表:

当其中一个扇区填充了除颜色之外的其他内容时，更容易找出[谁是独立人士]

查看 Patrick Dillon (@pdillon) 在 CodePen 上创作的笔 政党隶属关系 - #2。

用图案填充饼图扇区并不是图表库的常见功能（至少目前还没有），但如果您的首选库是基于 SVG 的，则可以自由地实现 SVG 图案。

就像在 SVG 中字面上的 <pattern /> 一样！

这是一个用于水平线的简单示例

<pattern 
    id="horzLines" 
    width="8" 
    height="4" 
    patternUnits="userSpaceOnUse">
       <line 
          x1="0" 
          y1="0" 
          x2="8" 
          y2="0" 
         style="stroke:#999;stroke-width:1.5" 
       />
</pattern>

现在任何 SVG 元素都可以使用该图案作为填充。甚至笔画。这是一个混合使用两个简单图案的示例

查看 Chris Coyier (@chriscoyier) 在 CodePen 上创作的笔 简单线条图案。

这对于填充 SVG 元素很好，但是 HTML 元素呢？

Irene Ros 创建了基于 SVG 但也可用于 CSS 的图案填充。

使用 SVG 图案作为填充

有几种方法可以使用 图案填充

• 您可以使用包含所有当前图案的 patterns.css 文件。这仅适用于非 SVG 元素。

• 您可以使用单个图案，但需要从示例页面复制。CSS 类定义可以在 此处 找到，SVG 图案定义可以在 此处 找到。

• 您可以添加自己的图案或修改我的图案！从 SVG 文档到图案的转换过程非常繁琐。图案填充工具链的目的是简化此过程。您可以克隆存储库，运行 npm install 和 grunt dev 以启动本地服务器。之后，对 src/patterns/**/* 文件的任何更改或添加都将自动获取，并将重新渲染 CSS 文件和示例页面。如果您创建了新的图案，请通过拉取请求发送过来！

这是我将它们应用于 SVG 元素（但也可以轻松应用于 HTML 元素）的情况

查看 Chris Coyier (@chriscoyier) 在 CodePen 上创作的笔 实用图案。

但是，CSS 用法是作为 base64 数据 URL，因此一旦它们存在，便无法轻松管理/更改。

以下是 Irene 使用 d3 创建的 旧式图表

在 CSS 中管理 SVG 图案

如果您的 URL 以正确的方式编码 SVG，您可以将其直接放入 CSS 中并使其保持相当可管理。

查看 Chris Coyier (@chriscoyier) 在 CodePen 上创作的笔 简单线条图案。

其他结合颜色的示例

以下是 John Schulz 的一个示例

查看 Chris Coyier (@chriscoyier) 在 CodePen 上创作的笔 SVG 彩色图案。

Ricardo Marimón 有一个在 d3 中创建图案的示例。该图案在扇区上看起来基本相同，但也许这是一个可以修改的起点。

其他图案来源

我们最近 汇总了一些！