javascript - 使用 CSS 或 SVG 填充字体的 'empty' 部分的最简单方法

Question

注意:这是一道关于vector techniques的题

我最初没能说清楚。 (我在标题中加入了“使用 CSS 和 SVG”，但几乎没有再提到它。)

另外:我是一名资深的图形程序员，负责制作 SVG 和 Javascript。我主要是一名数学家；偏移路径和交叉极其复杂的事物对我来说是一种乐趣。我想提早一点可能会有用；我们生活，我们学习...

---

这是一个很好的例子，说明了我所说的字体的“空白”部分:

这些片段是 Unicode 字符——因此它们可以从 SVG 复制到文本编辑器——正如您所见，方形颜色会影响它们的外观。改变“填充”肯定是错误的；整个字符都改变了颜色，并且仍然在下面的方 block 颜色上留下相同的空白窗口。

如果我能达到用 Angular 色的纯白色轮廓作为背景的效果，它们当然会更好看。如果我有每一个的最外层轮廓，作为一条封闭的路径，那将变得容易。 (但这可能吗？甚至有这样的路径吗？它肯定不会被关闭；它可以关闭吗？容易吗？)

当然，我可以为棋子定义我自己的图形，但这会破坏使用 Unicode 字符的优势，因为它需要我额外的工作和更大的文件大小用户。我不想重复别人的努力，设计漂亮的字形，我最终的应用程序可能涉及许多导入字体等。

因此，如果能找到一个可靠的解决方案，既能从字体中获取字符，又能为该字符提供适当的背景，那就太好了。

这不仅适用于国际象棋，尽管它当然是一个很好的例子。

提前致谢

汤姆

更新

这是一个软糖，只适合国际象棋，几乎可以工作。它依赖于这样一个事实，即在大多数带有棋子的字体中，黑白棋子的内部几乎是互补的。

<?xml version="1.0" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="440" height="440" style="font-size: 34px;"><defs><style type="text/css">.large{fill:#700;}.small{fill:#eee;}</style></defs><rect x="0" y="0" width="440" height="440" fill="white"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="60" y="0" width="20" height="20" class="small"/><rect x="60" y="40" width="20" height="20" class="small"/><rect x="80" y="20" width="20" height="20" class="small"/><rect x="100" y="0" width="20" height="20" class="small"/><rect x="100" y="40" width="20" height="20" class="small"/><rect x="120" y="20" width="20" height="20" class="small"/><rect x="140" y="0" width="20" height="20" class="small"/><rect x="140" y="40" width="20" height="20" class="small"/><rect x="160" y="20" width="20" height="20" class="small"/><rect x="180" y="0" width="20" height="20" class="small"/><rect x="180" y="40" width="20" height="20" class="small"/><rect x="200" y="20" width="20" height="20" class="small"/><rect x="220" y="0" width="20" height="20" class="small"/><rect x="220" y="40" width="20" height="20" class="small"/><rect x="240" y="20" width="20" height="20" class="small"/><rect x="260" y="0" width="20" height="20" class="small"/><rect x="260" y="40" width="20" height="20" class="small"/><rect x="280" y="20" width="20" height="20" class="small"/><rect x="300" y="0" width="20" height="20" class="small"/><rect x="300" y="40" width="20" height="20" class="small"/><rect x="320" y="20" width="20" height="20" class="small"/><rect x="340" y="0" width="20" height="20" class="small"/><rect x="340" y="40" width="20" height="20" class="small"/><rect x="360" y="20" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="0" y="60" width="20" height="20" class="small"/><rect x="0" y="100" width="20" height="20" class="small"/><rect x="0" y="140" width="20" height="20" class="small"/><rect x="0" y="180" width="20" height="20" class="small"/><rect x="0" y="220" width="20" height="20" class="small"/><rect x="0" y="260" width="20" height="20" class="small"/><rect x="0" y="300" width="20" height="20" class="small"/><rect x="0" y="340" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="20" y="80" width="20" height="20" class="small"/><rect x="20" y="120" width="20" height="20" class="small"/><rect x="20" y="160" width="20" height="20" class="small"/><rect x="20" y="200" width="20" height="20" class="small"/><rect x="20" y="240" width="20" height="20" class="small"/><rect x="20" y="280" width="20" height="20" class="small"/><rect x="20" y="320" width="20" height="20" class="small"/><rect x="20" y="360" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="40" y="60" width="20" height="20" class="small"/><rect x="40" y="100" width="20" height="20" class="small"/><rect x="40" y="140" width="20" height="20" class="small"/><rect x="40" y="180" width="20" height="20" class="small"/><rect x="40" y="220" width="20" height="20" class="small"/><rect x="40" y="260" width="20" height="20" class="small"/><rect x="40" y="300" width="20" height="20" class="small"/><rect x="40" y="340" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="380" y="80" width="20" height="20" class="small"/><rect x="380" y="120" width="20" height="20" class="small"/><rect x="380" y="160" width="20" height="20" class="small"/><rect x="380" y="200" width="20" height="20" class="small"/><rect x="380" y="240" width="20" height="20" class="small"/><rect x="380" y="280" width="20" height="20" class="small"/><rect x="380" y="320" width="20" height="20" class="small"/><rect x="380" y="360" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="400" y="60" width="20" height="20" class="small"/><rect x="400" y="100" width="20" height="20" class="small"/><rect x="400" y="140" width="20" height="20" class="small"/><rect x="400" y="180" width="20" height="20" class="small"/><rect x="400" y="220" width="20" height="20" class="small"/><rect x="400" y="260" width="20" height="20" class="small"/><rect x="400" y="300" width="20" height="20" class="small"/><rect x="400" y="340" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="420" y="80" width="20" height="20" class="small"/><rect x="420" y="120" width="20" height="20" class="small"/><rect x="420" y="160" width="20" height="20" class="small"/><rect x="420" y="200" width="20" height="20" class="small"/><rect x="420" y="240" width="20" height="20" class="small"/><rect x="420" y="280" width="20" height="20" class="small"/><rect x="420" y="320" width="20" height="20" class="small"/><rect x="420" y="360" width="20" height="20" class="small"/><rect x="0" y="380" width="20" height="20" class="small"/><rect x="0" y="420" width="20" height="20" class="small"/><rect x="20" y="400" width="20" height="20" class="small"/><rect x="40" y="380" width="20" height="20" class="small"/><rect x="40" y="420" width="20" height="20" class="small"/><rect x="60" y="400" width="20" height="20" class="small"/><rect x="80" y="380" width="20" height="20" class="small"/><rect x="80" y="420" width="20" height="20" class="small"/><rect x="100" y="400" width="20" height="20" class="small"/><rect x="120" y="380" width="20" height="20" class="small"/><rect x="120" y="420" width="20" height="20" class="small"/><rect x="140" y="400" width="20" height="20" class="small"/><rect x="160" y="380" width="20" height="20" class="small"/><rect x="160" y="420" width="20" height="20" class="small"/><rect x="180" y="400" width="20" height="20" class="small"/><rect x="200" y="380" width="20" height="20" class="small"/><rect x="200" y="420" width="20" height="20" class="small"/><rect x="220" y="400" width="20" height="20" class="small"/><rect x="240" y="380" width="20" height="20" class="small"/><rect x="240" y="420" width="20" height="20" class="small"/><rect x="260" y="400" width="20" height="20" class="small"/><rect x="280" y="380" width="20" height="20" class="small"/><rect x="280" y="420" width="20" height="20" class="small"/><rect x="300" y="400" width="20" height="20" class="small"/><rect x="320" y="380" width="20" height="20" class="small"/><rect x="320" y="420" width="20" height="20" class="small"/><rect x="340" y="400" width="20" height="20" class="small"/><rect x="360" y="380" width="20" height="20" class="small"/><rect x="360" y="420" width="20" height="20" class="small"/><rect x="380" y="400" width="20" height="20" class="small"/><rect x="400" y="380" width="20" height="20" class="small"/><rect x="400" y="420" width="20" height="20" class="small"/><rect x="420" y="400" width="20" height="20" class="small"/><rect x="60" y="100" width="40" height="40" class="large"/><rect x="60" y="180" width="40" height="40" class="large"/><rect x="60" y="260" width="40" height="40" class="large"/><rect x="60" y="340" width="40" height="40" class="large"/><rect x="100" y="60" width="40" height="40" class="large"/><rect x="100" y="140" width="40" height="40" class="large"/><rect x="100" y="220" width="40" height="40" class="large"/><rect x="100" y="300" width="40" height="40" class="large"/><rect x="140" y="100" width="40" height="40" class="large"/><rect x="140" y="180" width="40" height="40" class="large"/><rect x="140" y="260" width="40" height="40" class="large"/><rect x="140" y="340" width="40" height="40" class="large"/><rect x="180" y="60" width="40" height="40" class="large"/><rect x="180" y="140" width="40" height="40" class="large"/><rect x="180" y="220" width="40" height="40" class="large"/><rect x="180" y="300" width="40" height="40" class="large"/><rect x="220" y="100" width="40" height="40" class="large"/><rect x="220" y="180" width="40" height="40" class="large"/><rect x="220" y="260" width="40" height="40" class="large"/><rect x="220" y="340" width="40" height="40" class="large"/><rect x="260" y="60" width="40" height="40" class="large"/><rect x="260" y="140" width="40" height="40" class="large"/><rect x="260" y="220" width="40" height="40" class="large"/><rect x="260" y="300" width="40" height="40" class="large"/><rect x="300" y="100" width="40" height="40" class="large"/><rect x="300" y="180" width="40" height="40" class="large"/><rect x="300" y="260" width="40" height="40" class="large"/><rect x="300" y="340" width="40" height="40" class="large"/><rect x="340" y="60" width="40" height="40" class="large"/><rect x="340" y="140" width="40" height="40" class="large"/><rect x="340" y="220" width="40" height="40" class="large"/><rect x="340" y="300" width="40" height="40" class="large"/><rect x="60" y="60" width="320" height="320" style="fill:none; stroke-width:1; stroke:#000;"/><text x="240" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♔</text><text x="200" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♕</text><text x="80" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="360" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="160" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="280" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="320" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="120" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="80" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="120" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="160" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="200" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="280" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="320" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="360" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♚</text><text x="200" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♛</text><text x="80" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="360" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="160" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="280" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="320" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="120" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="80" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="120" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="160" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="200" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="280" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="320" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="360" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="374" text-anchor="middle" fill="black">♔</text><text x="200" y="374" text-anchor="middle" fill="black">♕</text><text x="80" y="374" text-anchor="middle" fill="black">♖</text><text x="360" y="374" text-anchor="middle" fill="black">♖</text><text x="160" y="374" text-anchor="middle" fill="black">♗</text><text x="280" y="374" text-anchor="middle" fill="black">♗</text><text x="320" y="374" text-anchor="middle" fill="black">♘</text><text x="120" y="374" text-anchor="middle" fill="black">♘</text><text x="80" y="334" text-anchor="middle" fill="black">♙</text><text x="120" y="334" text-anchor="middle" fill="black">♙</text><text x="160" y="334" text-anchor="middle" fill="black">♙</text><text x="200" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="334" text-anchor="middle" fill="black">♙</text><text x="280" y="334" text-anchor="middle" fill="black">♙</text><text x="320" y="334" text-anchor="middle" fill="black">♙</text><text x="360" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="94" text-anchor="middle" fill="black">♚</text><text x="200" y="94" text-anchor="middle" fill="black">♛</text><text x="80" y="94" text-anchor="middle" fill="black">♜</text><text x="360" y="94" text-anchor="middle" fill="black">♜</text><text x="160" y="94" text-anchor="middle" fill="black">♝</text><text x="280" y="94" text-anchor="middle" fill="black">♝</text><text x="320" y="94" text-anchor="middle" fill="black">♞</text><text x="120" y="94" text-anchor="middle" fill="black">♞</text><text x="80" y="134" text-anchor="middle" fill="black">♟</text><text x="120" y="134" text-anchor="middle" fill="black">♟</text><text x="160" y="134" text-anchor="middle" fill="black">♟</text><text x="200" y="134" text-anchor="middle" fill="black">♟</text><text x="240" y="134" text-anchor="middle" fill="black">♟</text><text x="280" y="134" text-anchor="middle" fill="black">♟</text><text x="320" y="134" text-anchor="middle" fill="black">♟</text><text x="360" y="134" text-anchor="middle" fill="black">♟</text></svg>

几乎，也就是说，但不完全是。我个人仍然可以透过这些碎片看到红色，而且它们只有在黑色方 block 上看起来才完美。

Answer 1

做你想做的事非常困难/棘手。也许您可以考虑一种更简单的方法？用白色勾勒出所有部分，使它们从背景中脱颖而出怎么样？

div {
  font-family: sans-serif;
  font-size: 80px;
  line-height: 80px;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  width: 80px;
  height: 80px;
  position: relative;
}

div:before
{
  content: attr(title);
  position: absolute;
  left: 0;
  width: 80px;
  height: 80px;
  z-index: -1;
  text-shadow:
     0px -1px 0 white,
     1px -1px 0 white,
     1px  0px 0 white,
     1px  1px 0 white,
     0px  1px 0 white,
    -1px  1px 0 white,
    -1px  0px 0 white,
    -1px -1px 0 white;
}

div:nth-child(2):before
{
  background-color: #700;
}

<div title="K">K</div><div title="Q">Q</div>