large_pie.svg 2.1 KB

123456789101112131415161718
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <svg viewBox="0 0 712 450" width="712" height="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3. <defs>
  4. <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  5. <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>
  6. </marker>
  7. <marker id="arrowheadWhite" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  8. <polygon points="0 0, 10 3.5, 0 7" fill="#fff"/>
  9. </marker>
  10. </defs>
  11. <style>
  12. .pieOuterCircle { fill: none; stroke: #333; stroke-width: 2; }
  13. .pieCircle { stroke: #fff; stroke-width: 2; }
  14. .slice { font-family: Arial, sans-serif; font-size: 14px; fill: #fff; font-weight: bold; }
  15. .pieTitleText { font-family: Arial, sans-serif; font-size: 20px; font-weight: bold; fill: #333; }
  16. .legend { font-family: Arial, sans-serif; font-size: 14px; fill: #333; }
  17. </style><g transform="translate(225,225)"><circle cx="0" cy="0" r="186" class="pieOuterCircle"/><path d="M 0 0 L 185 0 A 185 185 0 0 1 -149.66814395936527 108.74027167410755 Z" fill="#ff6b6b" class="pieCircle"/><text x="40.017700771555695" y="123.16181886022238" text-anchor="middle" class="slice">40%</text><path d="M 0 0 L -149.66814395936527 108.74027167410755 A 185 185 0 0 1 -3.3983948676339004e-14 -185 Z" fill="#4ecdc4" class="pieCircle"/><text x="-115.38534488239364" y="-58.7917697162713" text-anchor="middle" class="slice">35%</text><path d="M 0 0 L -3.3983948676339004e-14 -185 A 185 185 0 0 1 185 -4.5311931568452005e-14 Z" fill="#45b7d1" class="pieCircle"/><text x="91.57032816365789" y="-91.57032816365792" text-anchor="middle" class="slice">25%</text></g><text x="800" y="25" text-anchor="middle" class="pieTitleText">Large Size Export</text><rect x="490" y="183" width="18" height="18" fill="#ff6b6b" stroke="#ff6b6b"/><text x="512" y="197" class="legend">Data A [40]</text><rect x="490" y="205" width="18" height="18" fill="#4ecdc4" stroke="#4ecdc4"/><text x="512" y="219" class="legend">Data B [35]</text><rect x="490" y="227" width="18" height="18" fill="#45b7d1" stroke="#45b7d1"/><text x="512" y="241" class="legend">Data C [25]</text></svg>