具有填充、描邊和描邊寬度的 SVG 形狀

Question

我有一個帶有邊框、筆觸寬度和填充顏色的多邊形形狀。

我正在尋找多個多邊形形狀； 下面是其中一個有 4 個邊。 其中 3 條邊只有描邊，另一條邊有填充顏色。

從上圖中，我們有多邊形的一側有填充和描邊，其他的只是描邊的描邊寬度為 1。

我對 SVG 很陌生。 繪制這種形狀的最佳方法是什么？

路徑、線、多邊形或這些的組合？ 填充規則在這里有用嗎？ 請提出建議。

Answer 1

路徑和矩形的組合可能是您最終得到的。 我發現顯式填充更容易，因為如果需要，直接使用 JavaScript 操作更容易。

這是一種解決方案。 我發現在使用 SVG 時，讓事情盡可能簡單會讓你的生活更輕松。

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="777" height="480" style=""> <title>my vector image</title> <g class="currentLayer" style=""> <title>Layer 1</title> <rect fill="#4a90d6" stroke="#222222" style="color: rgb(0, 0, 0);" stroke-width="2" stroke-linejoin="round" stroke-dashoffset="" fill-rule="nonzero" id="svg_1" x="8" y="8" width="13" height="74" class="selected"/> <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 20.8456 8.25316 L 87.1747 7.74683" id="svg_5" class="selected"/> <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 21.0987 81.924 L 119.073 80.4051" id="svg_9" class="selected"/> <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 86.162 6.98734 L 118.061 79.6456" id="svg_14" class="selected"/> </g> </svg>