svg path inside path - d3.js

Question

How i can use path inside path?
</svg>
<svg height="210" width="400">
<path fill="rgb(176, 60, 178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" >
<title>test</title>
<path fill="rgb(14, 88, 228)" d="M100 0 L50 100 L125 100 Z" >
</path>
</svg>
In fact, this is what I want ideally:
bagel
Paint over part of the strip below, depending on the percentage.
I work in d3

Answer 1

You cannot nest one path tag within another.
How commented #Robert Longson
just put the paths one after the other. The later path will draw on
top of the earlier path.
<path ..... />
<path ..... />
<svg height="210" width="400">
<path fill="rgb(176, 60, 178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" />
<title>test</title>
<path fill="rgb(14, 88, 228)" d="M100 0 L50 100 L125 100 Z" />
</svg>

Answer 2

You cannot [1]:
Allowed are only the following:
Any number of the following elements, in any order:
animation elements
descriptive elements
paint server elements
clipPath, marker, mask, script, style
[1] https://svgwg.org/specs/paths/#PathElement

Answer 3

In SVG, elements render from top to bottom: each renders on top of another. If you want one path to render over another one, put it further down:
<svg height="210" width="400">
<path fill="rgb(176, 60, 178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" >
<title>test</title>
</path>
<path fill="rgb(14, 88, 228)" d="M100 0 L50 100 L125 100 Z" >
</svg>