我正在使用TCPDF，我遇到了问题。目前我正在尝试渲染一个用D3.js制作的饼图，但TCPDF正在绘制一些不应该的东西，我认为它们是 defs 标签。
以下是HTML格式：http://s33.postimg.org/fnwvr0e8f/chart.png
以下是PDF格式：http://s33.postimg.org/czcnel2bz/chart.png
以下是代码：
<svg xmlns="http://www.w3.org/2000/svg" width="635.3488372093024" height="350">
<defs xmlns="http://www.w3.org/2000/svg">
<radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad0">
<stop offset="0%" style="stop-color: rgb(36, 132, 193);"/>
<stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad1">
<stop offset="0%" style="stop-color: rgb(101, 166, 32);"/>
<stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad2">
<stop offset="0%" style="stop-color: rgb(123, 104, 136);"/>
<stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad3">
<stop offset="0%" style="stop-color: rgb(160, 93, 86);"/>
<stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient>
</defs>
<g class="p0_lineGroups" style="opacity: 1;">
<g class="p0_lineGroup">
<path d="M406.60807731424296,185.06425429843085L409.2728804615161,184.9194897323535C411.93768360878926,184.77472516627614,417.2672899033356,184.48519603412143,422.59689619788196,183.35884327935165C427.9265024924283,182.23249052458183,433.25610878697466,180.26931414719692,435.92091193424784,179.28772595850447L438.5857150815211,178.30613776981204" stroke="#2484c1" stroke-width="1" fill="none" style="opacity: 1;"/></g>
<g class="p0_lineGroup">
<path d="M236.58273629241512,225.17613747072312L235.36047483671888,225.69125176104222C234.1382133810227,226.20636605136139,231.6936904696303,227.23659463199965,226.80464464684547,228.3637184599429C221.9155988240607,229.49084228788615,214.58203008988352,230.71486136313436,210.9152457227949,231.32687090075845L207.24846135570633,231.9388804383826" stroke="#65a620" stroke-width="1" fill="none" style="opacity: 1;"/></g>
<g class="p0_lineGroup">
<path d="M270.9320048548812,112.76264622496167L267.5595591997975,111.1862892989631C264.1871135447137,109.60993237296452,257.4422222345463,106.45721852096736,252.945628027768,103.42207595296925C248.4490338209897,100.38693338497116,246.20073671760056,97.46936210097212,245.07658816590597,96.0105764589726L243.95243961421144,94.55179081697307" stroke="#7b6888" stroke-width="1" fill="none" style="opacity: 1;"/></g>
<g class="p0_lineGroup">
<path d="M302.8970629134642,100.73537296395465L302.0244215219816,97.03742519558193C301.151780130499,93.33947742720923,299.4064973475338,85.94358189046385,298.24297549222365,80.07965153263359C297.07945363691357,74.21572117480332,296.4976927092585,69.8837559958882,296.20681224543097,67.71777340643064L295.91593178160343,65.55179081697307" stroke="#a05d56" stroke-width="1" fill="none" style="opacity: 1;"/></g></g>
<g transform="translate(317.6744186046512,188.5)" class="p0_pieChart">
<g class="p0_arc" transform="rotate(0)">
<path id="p0_segment0" fill="url(#p0_grad0)" style="stroke: rgb(255, 255, 255); stroke-width: 1;" d="M5.449678256205722e-15,-89A89,89 0 0,1 6.866369340141512,88.73473374099211L0,0Z" data-index="0"/></g><g class="p0_arc" transform="rotate(175.57522123893807)">
<path id="p0_segment1" fill="url(#p0_grad1)" style="stroke: rgb(255, 255, 255); stroke-width: 1;" d="M5.449678256205722e-15,-89A89,89 0 0,1 56.99721760166694,68.35435015906617L0,0Z" data-index="1"/></g><g class="p0_arc" transform="rotate(315.7522123893806)">
<path id="p0_segment2" fill="url(#p0_grad2)" style="stroke: rgb(255, 255, 255); stroke-width: 1;" d="M5.449678256205722e-15,-89A89,89 0 0,1 37.799801202416305,-80.57403445935797L0,0Z" data-index="2"/></g><g class="p0_arc" transform="rotate(340.8849557522124)">
<path id="p0_segment3" fill="url(#p0_grad3)" style="stroke: rgb(255, 255, 255); stroke-width: 1;" d="M5.449678256205722e-15,-89A89,89 0 0,1 29.1444744003596,-84.09280356800328L0,0Z" data-index="3"/></g></g>
<text id="p0_title" class="p0_title" x="320.1744186046512" y="27" text-anchor="middle" fill="black" style="font-size: 20px; font-family: sans-serif;">Distribución paradas por causas</text><text x="320.1744186046512" y="87" id="p0_subtitle" class="p0_subtitle" text-anchor="middle" fill="#000000" style="font-size: 10px; font-family: sans-serif;">
</text><text x="5" y="345" id="p0_footer" class="p0_footer" text-anchor="left" fill="#999999" style="font-size: 0px; font-family: sans-serif;"/><defs><radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad0"><stop offset="0%" style="stop-color: rgb(36, 132, 193);"/><stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient><radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad1"><stop offset="0%" style="stop-color: rgb(101, 166, 32);"/><stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient><radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad2"><stop offset="0%" style="stop-color: rgb(123, 104, 136);"/><stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient><radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="120%" id="p0_grad3"><stop offset="0%" style="stop-color: rgb(160, 93, 86);"/><stop offset="100%" style="stop-color: rgb(0, 0, 0);"/></radialGradient></defs><g class="p0_labels-inner"><g id="p0_labelGroup0-inner" data-index="0" class="p0_labelGroup-inner" transform="translate(356.0820067766466,189.59125238801715)" style="opacity: 1;"><text id="p0_segmentPercentage0-inner" class="p0_segmentPercentage-inner" style="font-size: 11px; font-family: arial; fill: rgb(255, 255, 255);">49%</text></g><g id="p0_labelGroup1-inner" data-index="1" class="p0_labelGroup-inner" transform="translate(261.62348398674226,211.8756319281795)" style="opacity: 1;"><text id="p0_segmentPercentage1-inner" class="p0_segmentPercentage-inner" style="font-size: 11px; font-family: arial; fill: rgb(255, 255, 255);">39%</text></g><g id="p0_labelGroup2-inner" data-index="2" class="p0_labelGroup-inner" transform="translate(283.7064109658901,149.42369234720093)" style="opacity: 1;"><text id="p0_segmentPercentage2-inner" class="p0_segmentPercentage-inner" style="font-size: 11px; font-family: arial; fill: rgb(255, 255, 255);">7%</text></g><g id="p0_labelGroup3-inner" data-index="3" class="p0_labelGroup-inner" transform="translate(301.4647765539917,142.7418738688637)" style="opacity: 1;"><text id="p0_segmentPercentage3-inner" class="p0_segmentPercentage-inner" style="font-size: 11px; font-family: arial; fill: rgb(255, 255, 255);">5%</text></g></g><g class="p0_labels-outer"><g id="p0_labelGroup0-outer" data-index="0" class="p0_labelGroup-outer" transform="translate(444.5857150815211,183.90613776981203)" style="opacity: 1;"><text id="p0_segmentMainLabel0-outer" class="p0_segmentMainLabel-outer" style="font-size: 12px; font-family: arial; fill: rgb(51, 51, 51);">Desconocido</text><text id="p0_segmentValue0-outer" class="p0_segmentValue-outer" dy="14" style="font-size: 12px; font-family: arial; fill: rgb(173, 173, 173);">9.92</text></g><g id="p0_labelGroup1-outer" data-index="1" class="p0_labelGroup-outer" transform="translate(146.24846135570633,237.5388804383826)" style="opacity: 1;"><text id="p0_segmentMainLabel1-outer" class="p0_segmentMainLabel-outer" style="font-size: 12px; font-family: arial; fill: rgb(51, 51, 51);">Descanso</text><text id="p0_segmentValue1-outer" class="p0_segmentValue-outer" dy="14" style="font-size: 12px; font-family: arial; fill: rgb(173, 173, 173);">7.92</text></g><g id="p0_labelGroup2-outer" data-index="2" class="p0_labelGroup-outer" transform="translate(133.95243961421144,100.15179081697306)" style="opacity: 1;"><text id="p0_segmentMainLabel2-outer" class="p0_segmentMainLabel-outer" style="font-size: 12px; font-family: arial; fill: rgb(51, 51, 51);">Cambio de formato</text><text id="p0_segmentValue2-outer" class="p0_segmentValue-outer" dy="14" style="font-size: 12px; font-family: arial; fill: rgb(173, 173, 173);">1.42</text></g><g id="p0_labelGroup3-outer" data-index="3" class="p0_labelGroup-outer" transform="translate(195.13468178160343,71.15179081697306)" style="opacity: 1;"><text id="p0_segmentMainLabel3-outer" class="p0_segmentMainLabel-outer" style="font-size: 12px; font-family: arial; fill: rgb(51, 51, 51);">Averia en la linea</text><text id="p0_segmentValue3-outer" class="p0_segmentValue-outer" dy="14" style="font-size: 12px; font-family: arial; fill: rgb(173, 173, 173);">1.08</text></g></g><g class="p0_tooltips"><g class="p0_tooltip" id="p0_tooltip0" style="opacity: 0;"><rect rx="2" ry="2" x="-4" opacity="0.5" style="fill: rgb(0, 0, 0);" width="154" height="19" y="-13"/><text fill="#efefef" style="font-size: 10px; font-family: arial;">Desconocido: 9.92 horas (49%)</text></g><g class="p0_tooltip" id="p0_tooltip1" style="opacity: 0;"><rect rx="2" ry="2" x="-4" opacity="0.5" style="fill: rgb(0, 0, 0);" width="140" height="19" y="-13"/><text fill="#efefef" style="font-size: 10px; font-family: arial;">Descanso: 7.92 horas (39%)</text></g><g class="p0_tooltip" id="p0_tooltip2" style="opacity: 0;"><rect rx="2" ry="2" x="-4" opacity="0.5" style="fill: rgb(0, 0, 0);" width="176" height="19" y="-13"/><text fill="#efefef" style="font-size: 10px; font-family: arial;">Cambio de formato: 1.42 horas (7%)</text></g><g class="p0_tooltip" id="p0_tooltip3" style="opacity: 0;"><rect rx="2" ry="2" x="-4" opacity="0.5" style="fill: rgb(0, 0, 0);" width="167.8125" height="19" y="-13"/><text fill="#efefef" style="font-size: 10px; font-family: arial;">Averia en la linea: 1.08 horas (5%)</text></g></g></svg>
答案 0 :(得分：0)
如果它是你渲染的径向渐变，那就太奇怪了。你甚至不知道如何在它上面渲染一个渐变。
尝试将display="none"添加到<defs>元素。 这会影响某些浏览器的呈现，但可能会解决任何TCPDF错误。假设这是原因，并且您也不需要SVG在浏览器中工作。
答案 1 :(得分：0)
我找到了解决方案。
它不是<defs>标签，而是g标签，class="tooltip"标签。
只需添加display:none即可消失。