我有一個形狀的 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' />";
}
uj5u.com熱心網友回復：
正如羅伯特所說。只需將一件事畫在另一件事之上。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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/402341.html
標籤：
上一篇：SVG的每個路徑命令的手動影片