svg path inside path

user_13505827 0
Viewed 190

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

d3.js svg
3 Answers

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>

user_73948710

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

user_6839770

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>
user_134394050
Related