甜甜圈圖僅使用SVG標記

Question

我正在製作一個圖表，我需要將它從html導出到pdf。我使用的pdf引擎無法執行JS，因此我需要找到一種方法從服務器端生成HTML SVG。

這是我目前有：

<svg height="450px" width="100%" class="nvd3-svg" style="height: 450px; width: 100%;"> 
 
\t <g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,-25)"> 
 
\t \t <g> 
 
\t \t \t <g class="nv-pieWrap nvd3-svg"> 
 
\t \t \t \t <g class="nvd3 nv-wrap nv-pie nv-chart-6755" transform="translate(0,0)"> 
 
\t \t \t \t \t <g> 
 
\t \t \t \t \t \t <g class="nv-pie" transform="translate(353,227.5)"> 
 
\t \t \t \t \t \t \t <g class="nv-slice" fill="#003087" stroke="#003087"> 
 
\t \t \t \t \t \t \t \t <path d="M1.1144285872240914e-14,-182A182,182 0 1,1 -177.4368800170919,40.49880998004924L-110.89805001068244,25.311756237530776A113.75,113.75 0 1,0 6.965178670150571e-15,-113.75Z"> 
 
\t \t \t \t \t \t \t \t </path> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t \t <g class="nv-slice hover" fill="#393939" stroke="#393939"> 
 
\t \t \t \t \t \t \t \t <path d="M-178.555801655312,40.75419654232691A183.1476967930029,183.1476967930029 0 0,1 -3.364368609731414e-14,-183.1476967930029L-2.0895536010451713e-14,-113.75A113.75,113.75 0 0,0 -110.89805001068244,25.311756237530776Z"> 
 
\t \t \t \t \t \t \t \t </path> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t <g class="nv-pieLabels" transform="translate(353,227.5)"> 
 
\t \t \t \t \t \t \t <g class="nv-label" transform="translate(115.6133304699599,92.19855444986021)"> 
 
\t \t \t \t \t \t \t \t <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"> 
 
\t \t \t \t \t \t \t \t </rect> 
 
\t \t \t \t \t \t \t \t <text style="text-anchor: middle; fill: white;">71%</text> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t \t <g class="nv-label" transform="translate(-115.61333046995992,-92.1985544498602)"> 
 
\t \t \t \t \t \t \t \t <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"> 
 
\t \t \t \t \t \t \t \t </rect> 
 
\t \t \t \t \t \t \t \t <text style="text-anchor: middle; fill: white;">29%</text> 
 
\t \t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t </g> 
 
\t \t \t \t </g> 
 
\t \t \t </g> 
 
\t \t \t <g class="nv-legendWrap nvd3-svg" transform="translate(0,25)"> 
 
\t \t \t \t <g class="nvd3 nv-legend" transform="translate(10,205)"> 
 
\t \t \t \t \t <g transform="translate(310,205)"> 
 
\t \t \t \t \t \t <g class="nv-series" transform="translate(0,5)"> 
 
\t \t \t \t \t \t \t <circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(0, 48, 135); fill-opacity: 1; stroke: rgb(0, 48, 135);"> 
 
\t \t \t \t \t \t \t </circle> 
 
\t \t \t \t \t \t \t <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Cold</text> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t \t <g class="nv-series" transform="translate(65,5)"> 
 
\t \t \t \t \t \t \t <circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(57, 57, 57); fill-opacity: 1; stroke: rgb(57, 57, 57);"> 
 
\t \t \t \t \t \t \t </circle> 
 
\t \t \t \t \t \t \t <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Hot</text> 
 
\t \t \t \t \t \t </g> 
 
\t \t \t \t \t </g> 
 
\t \t \t \t </g> 
 
\t \t \t </g> 
 
\t \t </g> 
 
\t </g> 
 
</svg>

從上面的代碼中，什麼樣的價值觀，我需要改變，使這個圖表相應地響應冷和熱的動態值。我已經研究並調整了很多，沒有進展。您的幫助將不勝感激。

Answer 1

要更改圖形的兩個部分，您需要更改兩個<path>元素。更具體地說，這些路徑的d屬性。

d屬性描述曲線的形狀。如果我將更大的格式化爲更簡潔的格式，並減少小數位數，那麼您應該能夠更好地看到正在發生的事情。

M -178.56, 40.75 
A 183.14, 183.14 0 0,1 -3.36e-14,-183.14 
L -2.08e-14, -113.75 
A 113.75,113.75 0 0,0 -110.89, 25.31 
Z 

它在大約（-178,40）處開始（M =「移動到」）。然後畫出rdius 183的弧（「A」）到（0，-183）。然後從外半徑到內半徑的一條線（「L」）。然後最後再一個弧（「A」）回到開始。最後的「Z」關閉曲線，以便填充。

所以要改變圖表部分的大小。您需要調整兩個「A」命令和「L」命令。

您可以通過閱讀the SVG specification瞭解更多關於如何做到這一點的信息。或者，您可以查看網絡上提供的大量教程。

您的SVG圖看起來像可能是由SVG圖形庫（如D3.js）生成的。您可能想要調查該選項。