SVG：多边形内的路径

Question

我有一个 SVG 形状，定义为多边形。多边形可以包含另一个 SVG 吗？

<polygon class="st6" 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>

上面多边形内的路径不渲染。

谢谢

更新： 这是浏览器的完整组装输出。它在 IE 中显示为带有黑色边框的棕色十六进制，但元素之后的路径不会呈现静止。我还是做错了:)

<?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" class="st5">
<polygon class="st5" 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>

看起来路径上的“d”属性不在路径中，所以它在其他地方渲染了山丘...需要找出如何让这些数字自动排列，它们可以分组还是什么确定要渲染的区域？

最终更新： 好的，我一直在跟进上面堆叠元素的想法。我遇到的问题是我的路径是与我的多边形分开制作的。不理解点和路径“d”属性导致混淆。这是尝试拥有一个空白的六角形（多边形），其中包含不断变化的图标（路径），但是，它们从未对齐。相反，我将它们合并到 inkscape（svg 编辑器）中，然后将生成的 3 行（十六进制和图标更正）现在一起使用......这样点和其他值都排成一行。在我看来并不完全是最佳选择，但这确实有效，而且体积也不大。

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' />";
}

Answer 1

正如罗伯特所说。只需将一件事画在另一件事之上。 SVG 文档中靠后的元素绘制在文档中靠前的元素之后（以此类推）。

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

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

  <polygon class="st6" 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>

SVG：多边形内的路径

SVG: paths inside a polygon

svg

vector

polygon