Javascript 什么'；使用SVG文本实现多边形填充线条效果的最佳方法是什么？

我希望文本具有“着色”的效果（就像用蜡笔给图片着色一样）。我创建了一条SVG多边形填充线，但这条线太大了，占用了大量空间，我不想每次有人试图访问我的网站时浏览器都崩溃。我想我应该创建一个框，让文本整齐地放在框内，然后让CSS或JavaScript通过一个函数自动生成填充框的多段线，但我不确定该怎么做。我对屏蔽很熟悉，我只是在寻找一种生成屏蔽的方法，它不会占用大量的浏览器资源

---

我不知道您是如何在代码笔中创建完整的SVG的，但这有点疯狂。首先，这个巨大的面具甚至没有在任何地方使用——所以你可以直接删除它。其次，通过使用极其复杂的填充创建笔划，而不是实际使用笔划。有更简单的方法来创建“杂乱”填充-通常使用过滤器

---

是使用过滤器创建自定义填充的良好概述。在您的特定情况下，您需要创建一个对角线图案，然后使用feTurbulence/feDisplacement贴图组合稍微扭曲它，然后剪裁到文本的轮廓

请展示你试过的。嗯……好的。希望你能看到。这是我的代码笔：我使用Inkscape创建了SVG，然后删掉了Inkscape不需要的东西。有一个XML查看器，或者可以在代码编辑器中打开一个保存的.svg文件并编辑出来（我就是这么做的）。还有一个有用的在线工具可以帮助人们清理.svg文件：我写了一个工具来帮助人们了解过滤器可以为文本填充做什么——我从来没有想到过生成过滤器文本——但你会得到一个想法。这是最终的产品：我决定使用一个方框掩码来进行“设计”。在某个时候，我将对其进行更多的编辑，以包括一条45度角的斜线，以模仿方框前面的“着色”效果。我认为这是一个比以前更好的解决方案。但这将暂时奏效。谢谢你的帮助！