在結構js畫布上加載svg不會顯示圓形

Question

我正在使用Fabric js在畫布上加載SVG。 SVG元素是一個顯示各種畫布信息的表。 該表包含多個元素，其中包括圓圈和線元素。

我的問題是線條顯示正確，但是圓圈根本不顯示。

盡管可能無關緊要，但是這些元素是通過在臨時畫布上繪制然后將其導出為SVG生成的。

在加載svg時，我使用了很好的舊fabric.loadSVGFromString，blow是如何在畫布上對svg進行加載的示例：

fabric.loadSVGFromString(options.svgLegend, function (results, renderOptions) {
      var obj = fabric.util.groupSVGElements(results, renderOptions);                
      annotationManager.canvas.add(obj);
      annotationManager.canvas.renderAll();
});

后

以下是生成的SVG的示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin">
<title>Legend</title>
<g x="0" font-family="Helvetica, Arial, sans-serif" font-size="18px" font-weight="bold" text-anchor="start">
    <text x="0" dy="1em">Style</text>
    <text id="sortLegendEstimator" x="175" dy="1em">Author</text>
    <text id="sortLegendType" x="350" dy="1em">Type</text>
    <text id="sortLegendQuantity" x="525" dy="1em">Quantity</text>
    <text id="sortLegendDescription" x="700" dy="1em">Description</text>
</g>
<g x="0" y="20" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="40" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="40" strokeWidth="4" stroke="#ff887c" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">266.28 ft</text>
    <g x="700" dy="1.5em">
        <text x="700" y="20" text-anchor="start">Babilonia, și în special capitala sa, orașul Babilon, au fost pentru mult timp u</text>
    </g>
</g>
<g x="0" y="50" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="70" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">point group</text>
    <text x="525" dy="1.5em">3</text>
</g>
<g x="0" y="80" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="100" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="100" strokeWidth="4" stroke="#ff887c" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">67.03 ft</text>
</g>
<g x="0" y="110" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="130" r="25" strokeWidth="12" stroke="#dc2127" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="130" strokeWidth="12" stroke="#dc2127" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">87.53 ft</text>
</g>
<g x="0" y="140" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="160" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="160" strokeWidth="4" stroke="#ff887c" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">97.2 ft</text>
</g>    

到目前為止，我幾乎已經嘗試了所有方法。 放棄SVG並不是一個選擇，因為它可以使Fabric處理其所需的許多功能（拖動，調整大小等）。SVG基本上是一個表圖例。 歡迎任何幫助。

Answer 1

解決了！

問題在於，默認情況下，面料正在加載寬度為0的svg形狀。 通過將圓的寬度顯式設置為其半徑來解決此問題，如下所示：

fabric.loadSVGFromString(options.svgLegend, function (results, renderOptions) {

            results.filter(function(obj){ if(obj.type === 'circle'){ obj.width = obj.radius; } });

注意：我確實注意到線的構造不正確（使用x和y坐標而不是x1，x2，y1，y2），但這不是我的問題的原因。