SVG: paths inside a polygon-CodePudding

I have an SVG of a shape, defined as polygon. Can the polygon contain another SVG?

<polygon  points="" fill="#7A5852" stroke="#000" stroke-width="1">

<path style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.929352,294.56951 c 1.2122153,-1.12193 2.2223419,-0.25968 2.4054258,0.43431" id="path1400" />

</polygon>

The path inside the polygon above does not render.

Thanks

UPDATED: This is the complete assembled output to the browser. It appears in IE as a brown hex with black border, but the paths after the element do not render still. I'm still doing something wrong :)

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2410 1192" style="enable-background:new 0 0 2410 1192;" xml:space="preserve">
<g id="NEW" >
<polygon  points="247.8,37.9 223.8,37.9 211.7,58.9 223.8,79.9 247.8,79.9 259.8,58.9" fill="#7A5852" stroke="#000" stroke-width="1"/>

    <path style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.929352,294.56951 c 1.2122153,-1.12193 2.2223419,-0.25968 2.4054258,0.43431"/>    
    <path style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 0.19209997,295.56342 c 1.15764233,-1.7538 2.25748843,-1.04164 3.34922123,0.0167"/>
    <path style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 0.7349912,293.93474 c 0.9089636,-1.1574 1.6844633,-0.98694 2.372017,0.0585" />
    
</g></svg>

it looks like the "d" attribute on the paths is not within the so it renders the hills elsewhere...need to find out how to get these numbers to line up automatically, can they be grouped or something to establish their area to render in?

FINAL UPDATE: Okay, I kept following up on the idea of the stacked elements above. The problem I had was that my paths were made separately from my polygon. Not understanding the points and path "d" attributes led to confusion. This was an attempt to have a blank Hex Shape (the polygon) with changing icons inside (the paths), however, they never lined up. Instead I merged them in inkscape (svg editor) and just took the resulting 3 lines (the hex and icon corrected) and use them together now...this way the points and other values all line up. Not entirely optimal in my mind, but this does work and its not terribly bulky.

if($land_rand  == 1){
    //Mountains
  
}elseif($land_rand  >= 2 AND $land_rand  <= 3){
    //Hills
    echo "<polygon class='st5' points='{$points}' fill='#7a5852' 
    stroke='#000000' stroke-width='1'/>";
    echo "<path style='fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.17463px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' 
    d='m 234.07215,60.015884 c 8.88334,-10.342263 16.28579,-2.393802 17.62744,4.003591'/>";
    echo "<path style='fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.17463px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' 
    d='m 221.34114,69.178024 c 8.48351,-16.167017 16.54337,-9.602128 24.54388,0.153945'/>";
    echo "<path style='fill:none;stroke:#000000;stroke-width:2.17463px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' 
    d='m 225.31963,54.164398 c 6.66105,-10.669236 12.34408,-9.097888 17.3826,0.539269' />";            
}else{
    //Blank Land
    echo "<polygon class='st5' points='{$points}' fill='#7a5852' 
    stroke='#000000' stroke-width='1'/>";
    echo "<path style='fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.17463px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' 
    d='m 234.07215,60.015884 c 8.88334,-10.342263 16.28579,-2.393802 17.62744,4.003591'/>";
    echo "<path style='fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.17463px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' 
    d='m 221.34114,69.178024 c 8.48351,-16.167017 16.54337,-9.602128 24.54388,0.153945'/>";
    echo "<path style='fill:none;stroke:#000000;stroke-width:2.17463px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' 
    d='m 225.31963,54.164398 c 6.66105,-10.669236 12.34408,-9.097888 17.3826,0.539269' />";
}

CodePudding user response：

As Robert said. Just draw one thing on top of the other. Elements that are later in the SVG document are drawn after (and so over) elements that are earlier in the document.

svg {
  width: 100px;
  background-color: linen;
}

<svg viewBox="1 293 4 4" width="100">

  <polygon  points="3,293, 5,294, 5,296, 3,297, 1,296, 1,294" fill="#7A5852" stroke="#000" stroke-width="0.1"/>

  <path style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.929352,294.56951 c 1.2122153,-1.12193 2.2223419,-0.25968 2.4054258,0.43431" id="path1400" />

</svg>