TCPDF绘制 <defs> 标签

Question

我正在使用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> 

Answer 1

如果它是你渲染的径向渐变，那就太奇怪了。 如何在它自己上渲染渐变并不是很明显。

尝试将display="none"添加到<defs>元素。 这会影响某些浏览器的渲染 ，但可能会解决任何TCPDF错误。 假设这是原因，并且您也不需要SVG在浏览器中工作。

Answer 2

我找到了解决方案。

它不是<defs>标签，它是g标签，是class="tooltip"标签。 只需添加display:none消失。