Html SVG图像背景填充路径

我有几个用于社交媒体链接的SVG图标。我希望它们有一个白色的背景。在社区的帮助下，我发现这可以通过添加到SVG代码

来实现，其中XXX等于

d=”“

代码的第一部分，直到第一个

m

。例如，有以下SVG代码：

概述

SVG有一个丰富的DOM API，所以如果有一条路径无法填充，那么构建一条路径如何

提出的方法包括以下步骤：

确定给定路径（“O路径”）的凸包

从凸包的边界构建路径（“CH-path”）

将CH路径插入到SVG中，就在O路径之前

用所需颜色填充CH路径，保持O形路径透明

CH路径保证填充。由于SVG通过应用画家的算法来渲染，所以CH路径可以用作O路径的背景，将抽象画布着色在O路径后面，并且模拟大多数用户会直观地认为填充路径。 这个想法似乎有些过分，但在野外遇到的大多数路径定义中都应该是可靠的（有关概念上的警告，请参阅“限制”一节）。它可以很容易地扩展到考虑一组用来绘制目标图标的路径元素。 限制

CH路径将根据定义覆盖O路径。另一种方法仅适用于凸O形路径。如果O形路径不是凸的，则需要根据具体情况决定此解决方案是否仍然有用（例如，像吃豆人这样的图标比星形图标的几率更大）

详细信息

计算凸壳（CH） 点集的CH计算为完全覆盖这些点的最小凸点集。使用

path

元素的domapi的

getPointAtLength

和

getTotalLength

方法，可以获得合适的点集，而无需分析路径规范，因为这些方法允许以编程方式沿着路径行走并在路径上采样点（在下面的代码中，以0.1距离单位长度的等距间隔）。然后将生成的点集输入CH算法

从CH路径构建路径 CH算法以适当的顺序返回CH点，通过用直线段连接相邻点来绘制边界。这可以很容易地转换为

path

元素的

d

属性，使用绝对坐标中的

M

（移动到）和

L

（线到）路径命令

将CH路径插入SVG的O路径之前。
SVG元素的domapi的方法

insertAdjacentElement

在应用于O-path时实现了这一点

用所需颜色填充CH路径，保持O形路径透明
使用

fill

属性

在线演示

为了更好的可见性，演示会转换图标路径并绘制CH边界。实际计算是在原始路径坐标上执行的。CH以红色绘制。生产代码将利用一些库来计算CH。演示会显示邮件图标，但包括手机和instagram ico的路径定义ns-注释相应的

use

元素以使用它们

单击左侧图标的填充区域。
b、 十）
? 1.
：（（a.xb.y）
1.
：（（a.yx+（下部通道）
设i=0；
而（八点[i].x==八点[0].x）{
//***log（`getConvexHull:Push point#${i}.`）；
a_ch.push（pa_points[i]）；//是的，点是按字典顺序排列的
i++；
}
n_idxCurrentCandidate=i-1；
而（n_idxCurrentCandidate+1n_fac*m_基.dy）{
//检测到更陡的坡度。
n_idxCurrentCandidate=k；
m_base.dx=pa_points[k].x-pa_points[n_base].x；
m_base.dy=pa_points[k].y-pa_points[n_base].y；