我正在尝试使用以下 HTML 代码填充 SVG 中路径元素的内部：
我在SO上看过几篇相关的帖子，但我发现它们难以理解并且没有帮助。我需要做什么才能用颜色填充路径元素的内部？
<h2>Start of arrow</h2>
<svg width="450" height="400" xmlns="http://www.w3.org/2000/svg">
<g id="arrow" stroke="red" stroke-width="3" stroke-linecap="round" fill="green">
<path d="M100 298 Q 300 306 400 290"/>
<path d="M100 315 Q 300 305 400 315"/>
<path d="M100 298 Q 112 306 100 315"/>
</g>
</svg>绘制填充路径的一种方法是将路径数据抽象为多边形并以合适的顺序对命令坐标进行排序：
（重新排序路径命令要求您的路径命令使用绝对坐标 - 例外情况是仅描述 x 或 y 坐标的
HVdMQQbody {
font-family: sans-serif;
}
svg {
border: 1px solid #ccc;
}<h3>1. Concatenated path commands to polygon – gibberish :(</h3>
<p>Strip Command type letters. Third path should become 2nd command. Whitespace agnostic. </p>
<svg viewBox="0 200 450 200">
<path stroke="red" stroke-width="3" stroke-linecap="round" fill="none" d="
M 100,298 300,306 400,290
100,315 300,305 400,315
100,298 112,306 100,315" />
</svg>
<h3>2. Path commands to polygon – sort points by logical drawing order (top-right to bottom-right)</h3>
<svg viewBox="0 200 450 200">
<!--
1. path1: quadratic command end point to start/moveTo
2. path1: Moveto to quadratic final point
3. path3: to 2nd segment
4. path2: to 3rd segment
-->
<path stroke="red" stroke-width="3" stroke-linecap="round" fill="none" d="
M
400,290 300,306 100,298
100,298 112,306 100,315
100,315 300,305 400,315
" />
</svg>
<h3>3. Path commands to polygon – remove redundant adjacent coordinates</h3>
<svg viewBox="0 200 450 200">
<path stroke="red" stroke-width="3" stroke-linecap="round" fill="none" d="
M 400,290 300,306 100,298
112,306 100,315
300,305 400,315
" />
</svg>
<h3>4. Path polygon to quadratic Béziercontrol points</h3>
<svg viewBox="0 200 450 200">
<path stroke="red" stroke-width="3" stroke-linecap="round" fill="red" d="
M
400,290 Q 300,306 100,298
Q 112,306 100,315
Q 300,305 400,315
z
" />
</svg>,