<分区>
<分区>
我正在处理需要从 html 导出到 pdf 的图表。我正在使用的 pdf 引擎无法执行 JS，我需要找到一种从服务器端生成 HTML SVG 的方法。
这是我目前拥有的:
<svg height="450px" width="100%" class="nvd3-svg" style="height: 450px; width: 100%;">
<g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,-25)">
<g>
<g class="nv-pieWrap nvd3-svg">
<g class="nvd3 nv-wrap nv-pie nv-chart-6755" transform="translate(0,0)">
<g>
<g class="nv-pie" transform="translate(353,227.5)">
<g class="nv-slice" fill="#003087" stroke="#003087">
<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">
</path>
</g>
<g class="nv-slice hover" fill="#393939" stroke="#393939">
<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">
</path>
</g>
</g>
<g class="nv-pieLabels" transform="translate(353,227.5)">
<g class="nv-label" transform="translate(115.6133304699599,92.19855444986021)">
<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);">
</rect>
<text style="text-anchor: middle; fill: white;">71%</text>
</g>
<g class="nv-label" transform="translate(-115.61333046995992,-92.1985544498602)">
<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);">
</rect>
<text style="text-anchor: middle; fill: white;">29%</text>
</g>
</g>
</g>
</g>
</g>
<g class="nv-legendWrap nvd3-svg" transform="translate(0,25)">
<g class="nvd3 nv-legend" transform="translate(10,205)">
<g transform="translate(310,205)">
<g class="nv-series" transform="translate(0,5)">
<circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(0, 48, 135); fill-opacity: 1; stroke: rgb(0, 48, 135);">
</circle>
<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Cold</text>
</g>
<g class="nv-series" transform="translate(65,5)">
<circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(57, 57, 57); fill-opacity: 1; stroke: rgb(57, 57, 57);">
</circle>
<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Hot</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>根据上面的代码，我需要更改哪些值才能使此图表相应地响应冷热的动态值。我已经研究并调整了很多但没有取得进展。非常感谢您的协助。
最佳答案
要更改图形的两个部分，您需要更改两个 <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 到 (0, -183) 的圆弧 ("A")。然后是从外径到内径的线(“L”)。最后是另一个弧线(“A”)回到起点。最后的“Z”关闭曲线，以便可以填充。
因此要更改该图形部分的大小。您需要调整两个“A”命令和“L”命令。
您可以通过阅读 the SVG specification 了解更多关于如何做到这一点的信息.或者，您可以查看网络上提供的众多教程中的任何一个。
您的 SVG 图形看起来可能是由 SVG 图形库生成的，例如 D3.js .您可能想要调查该选项。
关于css - 仅使用 SVG 标签的圆环图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43808708/