Javascript 如何在SVG的路径中填充多种颜色？

我正在使用默认填充颜色为白色的路径。我通过将路径存储在对象中来显示路径，例如：

我将对象命名为：svg\u路径

svg_path: "M 249.00,4.80 C 290.13,4.93 329.59,13.62 366.00,33.31 392.61,47.70 415.78,66.26 435.71,89.00 513.68,177.94 515.13,312.55 440.74,404.00 420.15,429.31 394.70,450.17 366.00,465.69 333.17,483.45 295.30,493.58 258.00,494.00 258.00,494.00 234.00,494.00 234.00,494.00 213.63,493.76 183.16,486.19 164.00,479.05 131.25,466.84 100.84,447.67 76.09,422.91 4.06,350.88 -15.12,241.71 25.86,149.00 53.48,86.53 109.78,36.32 175.00,16.02 191.65,10.85 218.73,5.03 236.00,4.80 236.00,4.80 249.00,4.80 249.00,4.80 Z M 340.00,160.00 C 340.00,160.00 300.00,119.00 300.00,119.00 297.32,116.32 288.38,106.20 285.00,106.20 281.69,106.20 272.60,116.32 270.04,119.00 270.04,119.00 231.00,162.00 231.00,162.00 231.00,162.00 250.00,161.00 250.00,161.00 250.00,161.00 263.00,161.00 263.00,161.00 263.00,161.00 263.00,175.00 263.00,175.00 263.00,175.00 264.00,197.00 264.00,197.00 264.00,197.00 146.00,197.00 146.00,197.00 146.00,197.00 145.00,219.00 145.00,219.00 145.00,219.00 145.00,237.00 145.00,237.00 145.00,237.00 168.00,237.00 168.00,237.00 168.00,237.00 185.00,238.00 185.00,238.00 185.00,238.00 306.00,238.00 306.00,238.00 306.00,238.00 306.00,161.00 306.00,161.00 306.00,161.00 340.00,160.00 340.00,160.00 Z M 307.00,387.00 C 307.00,387.00 361.00,345.58 361.00,345.58 364.52,342.69 377.49,333.73 375.83,329.00 374.51,325.21 362.60,315.49 359.00,312.42 359.00,312.42 328.00,287.00 328.00,287.00 321.92,282.23 313.29,275.30 306.00,273.00 306.00,273.00 306.00,309.00 306.00,309.00 306.00,309.00 145.00,309.00 145.00,309.00 145.00,309.00 145.00,350.00 145.00,350.00 145.00,350.00 214.00,350.00 214.00,350.00 214.00,350.00 231.00,349.00 231.00,349.00 231.00,349.00 268.00,349.00 268.00,349.00 268.00,349.00 296.00,349.00 296.00,349.00 298.60,349.01 302.42,348.67 304.42,350.60 307.07,353.15 306.99,360.49 307.00,364.00 307.00,364.00 307.00,387.00 307.00,387.00 Z"

此代码相当于一个圆内的两个箭头

我想说的是：

将圆圈颜色填充为白色

将直箭头填充到绿色

将弯曲箭头填充为橙色

---

有没有办法做到这一点？

你真的应该把它画成三条路径。但是如果你想要一个黑客-这里有一个使用过滤器的黑客：

svg{
背景：灰色；
}

根据位的位置，您可能可以使用linearGradient，但使用3条单独的路径并分别为其着色要容易得多。@RobertLongson这就是问题所在，我只需要使用一条路径，因为我在vue2谷歌地图包中使用了该路径。沿着箭头的曲线是故意的吗，还是仅仅因为你用三次曲线来描述直线？如果是这样，请检查此路径：

“M 250.1 4.8 A 240 240 0 1 249.9 4.8 Z M 340160 285106.2 231162 263161 264197 146197 146238 306238 306238 306161 Z 307387 375.83329 306273 306309 145309 145350 304.42350.60Z”

如果您打算在地图（gmap或地图盒）中使用此svg，我建议你研究一下geojsons，这样更符合你的需要。您可以通过地图的api分别设置每个元素的样式