2017-02-09 4 views
5

मुझे यह सरल HTML पृष्ठ दो सरल एसवीजी छवियों के साथ मिला है। जब तक मैं पेज (क्रोम) मुद्रित करने की कोशिश नहीं करता तब तक सब ठीक है। जब मैं पृष्ठ मुद्रित करता हूं तो मेरा पहला चार्ट कुछ जानकारी खो देता है और मुझे नहीं पता कि क्यों।एसवीजी छवियां एक-दूसरे को छेड़छाड़ करती हैं

पहले और मुद्रण के बाद: सीएसएस जोड़ने : Before and after printing

यह अपने आप का प्रयास करें:

<html> 
 
    <body> 
 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:Open Sans, Helvetica Neue, Arial, sans-serif;font-size:14px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"> 
 
     <desc>Created with Highstock 4.2.6</desc> 
 
     <defs> 
 
     <clipPath id="highcharts-1"> 
 
      <rect x="0" y="0" width="523" height="330"></rect> 
 
     </clipPath> 
 
     </defs> 
 
     <rect x="0" y="0" width="600" height="400" fill="#FFFFFF" class=" highcharts-background"></rect> 
 
     <rect x="67" y="10" width="523" height="330" fill="rgb(255,255,255)" fill-opacity="0.00"></rect> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 153.5 10 L 153.5 340 240.5 340 240.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 328.5 10 L 328.5 340 415.5 340 415.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 502.5 10 L 502.5 340 589.5 340 589.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 67 340.5 L 590 340.5 590 258.5 67 258.5"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 67 175.5 L 590 175.5 590 93.5 67 93.5"></path> 
 
     <g class="highcharts-grid"></g> 
 
     <g class="highcharts-grid"> 
 
     <path fill="none" d="M 67 340.5 L 590 340.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 258.5 L 590 258.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 175.5 L 590 175.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 93.5 L 590 93.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 9.5 L 590 9.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="328.5" text-anchor="middle" transform="translate(0,0)" class=" highcharts-xaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="383"> 
 
      <tspan>Notenverteilung der Bauwerke</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="26" text-anchor="middle" transform="translate(0,0) rotate(270 26 175)" class=" highcharts-yaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="175"> 
 
      <tspan>Anzahl der Bauwerke</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-series-group"> 
 
     <g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(67,10) scale(1 1)" style="" clip-path="url(#highcharts-1)"> 
 
      <rect x="17" y="265" width="53" height="66" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="105" y="282" width="52" height="49" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="192" y="42" width="52" height="289" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="279" y="224" width="52" height="107" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="366" y="323" width="52" height="8" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="453" y="315" width="53" height="16" fill="#3090F0" rx="0" ry="0"></rect> 
 
     </g> 
 
     <g class="highcharts-markers highcharts-series-0" transform="translate(67,10) scale(1 1)" clip-path="none"></g> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-xaxis-labels"> 
 
     <text x="110.58333333333334" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>1,0-1,4</tspan> 
 
     </text> 
 
     <text x="197.75" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>1,5-1,9</tspan> 
 
     </text> 
 
     <text x="284.9166666666667" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>2,0-2,4</tspan> 
 
     </text> 
 
     <text x="372.08333333333337" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>2,5-2,9</tspan> 
 
     </text> 
 
     <text x="459.25" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>3,0-3,4</tspan> 
 
     </text> 
 
     <text x="546.4166666666666" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>3,5-4,0</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-yaxis-labels"> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="346" opacity="1"> 
 
      <tspan>0</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="264" opacity="1"> 
 
      <tspan>10</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="181" opacity="1"> 
 
      <tspan>20</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="99" opacity="1"> 
 
      <tspan>30</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1"> 
 
      <tspan>40</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)"> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path> 
 
     <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path> 
 
     </g> 
 
     <text x="590" text-anchor="end" style="cursor:pointer;color:#808080;font-size:14px;fill:#808080;" y="395"></text> 
 
    </svg> 
 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:Open Sans, Helvetica Neue, Arial, sans-serif;font-size:14px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"> 
 
     <desc>Created with Highstock 4.2.6</desc> 
 
     <defs> 
 
     <clipPath id="highcharts-1"> 
 
      <rect x="0" y="0" width="516" height="312"></rect> 
 
     </clipPath> 
 
     </defs> 
 
     <rect x="0" y="0" width="600" height="400" fill="#FFFFFF" class=" highcharts-background"></rect> 
 
     <rect x="74" y="10" width="516" height="312" fill="rgb(255,255,255)" fill-opacity="0.00"></rect> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 77.5 10 L 77.5 322 106.5 322 106.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 135.5 10 L 135.5 322 164.5 322 164.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 193.5 10 L 193.5 322 222.5 322 222.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 251.5 10 L 251.5 322 280.5 322 280.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 309.5 10 L 309.5 322 338.5 322 338.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 367.5 10 L 367.5 322 396.5 322 396.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 425.5 10 L 425.5 322 455.5 322 455.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 484.5 10 L 484.5 322 513.5 322 513.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 542.5 10 L 542.5 322 571.5 322 571.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 322.5 L 590 322.5 590 260.5 74 260.5"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 197.5 L 590 197.5 590 135.5 74 135.5"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 72.5 L 590 72.5 590 10.5 74 10.5"></path> 
 
     <g class="highcharts-grid"></g> 
 
     <g class="highcharts-grid"> 
 
     <path fill="none" d="M 74 322.5 L 590 322.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 260.5 L 590 260.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 197.5 L 590 197.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 135.5 L 590 135.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 72.5 L 590 72.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 9.5 L 590 9.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="332" text-anchor="middle" transform="translate(0,0)" class=" highcharts-xaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="382.94112549695427">Jahre</text> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="26" text-anchor="middle" transform="translate(0,0) rotate(270 26 166)" class=" highcharts-yaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="166">Kosten</text> 
 
     </g> 
 
     <g class="highcharts-series-group"> 
 
     <g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(74,10) scale(1 1)" style="" clip-path="url(#highcharts-1)"> 
 
      <rect x="1" y="202" width="5" height="111" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="9" y="132" width="4" height="181" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="16" y="212" width="4" height="101" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="23" y="24" width="5" height="289" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="31" y="300" width="4" height="13" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="38" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="45" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="52" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="60" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="67" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="74" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="81" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="89" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="96" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="103" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="110" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="118" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="125" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="132" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="140" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="147" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="154" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="161" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="169" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="176" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="183" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="190" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="198" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="205" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="212" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="219" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="227" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="234" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="241" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="249" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="256" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="263" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="270" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="278" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="285" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="292" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="299" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="307" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="314" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="321" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="328" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="336" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="343" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="350" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="358" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="365" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="372" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="379" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="387" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="394" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="401" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="408" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="416" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="423" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="430" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="438" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="445" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="452" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="459" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="467" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="474" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="481" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="488" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="496" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="503" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="510" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
     </g> 
 
     <g class="highcharts-markers highcharts-series-0" transform="translate(74,10) scale(1 1)" clip-path="none"></g> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-xaxis-labels"> 
 
     <text x="80.93363446243863" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 80.93363446243863 340)" y="340" opacity="1"> 
 
      <tspan>2017</tspan> 
 
     </text> 
 
     <text x="168.14490206807244" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 168.14490206807244 340)" y="340" opacity="1"> 
 
      <tspan>2029</tspan> 
 
     </text> 
 
     <text x="255.35616967370623" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 255.35616967370623 340)" y="340" opacity="1"> 
 
      <tspan>2041</tspan> 
 
     </text> 
 
     <text x="342.5674372793401" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 342.5674372793401 340)" y="340" opacity="1"> 
 
      <tspan>2053</tspan> 
 
     </text> 
 
     <text x="429.7787048849739" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 429.7787048849739 340)" y="340" opacity="1"> 
 
      <tspan>2065</tspan> 
 
     </text> 
 
     <text x="516.9899724906077" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 516.9899724906077 340)" y="340" opacity="1"> 
 
      <tspan>2077</tspan> 
 
     </text> 
 
     <text x="110.0040569976499" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 110.0040569976499 340)" y="340" opacity="1"> 
 
      <tspan>2021</tspan> 
 
     </text> 
 
     <text x="139.07447953286115" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 139.07447953286115 340)" y="340" opacity="1"> 
 
      <tspan>2025</tspan> 
 
     </text> 
 
     <text x="197.2153246032837" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 197.2153246032837 340)" y="340" opacity="1"> 
 
      <tspan>2033</tspan> 
 
     </text> 
 
     <text x="226.28574713849497" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 226.28574713849497 340)" y="340" opacity="1"> 
 
      <tspan>2037</tspan> 
 
     </text> 
 
     <text x="284.4265922089175" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 284.4265922089175 340)" y="340" opacity="1"> 
 
      <tspan>2045</tspan> 
 
     </text> 
 
     <text x="313.49701474412876" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 313.49701474412876 340)" y="340" opacity="1"> 
 
      <tspan>2049</tspan> 
 
     </text> 
 
     <text x="371.63785981455135" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 371.63785981455135 340)" y="340" opacity="1"> 
 
      <tspan>2057</tspan> 
 
     </text> 
 
     <text x="400.7082823497626" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 400.7082823497626 340)" y="340" opacity="1"> 
 
      <tspan>2061</tspan> 
 
     </text> 
 
     <text x="458.84912742018514" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 458.84912742018514 340)" y="340" opacity="1"> 
 
      <tspan>2069</tspan> 
 
     </text> 
 
     <text x="487.9195499553964" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 487.9195499553964 340)" y="340" opacity="1"> 
 
      <tspan>2073</tspan> 
 
     </text> 
 
     <text x="546.0603950258189" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 546.0603950258189 340)" y="340" opacity="1"> 
 
      <tspan>2081</tspan> 
 
     </text> 
 
     <text x="575.1308175610302" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 575.1308175610302 340)" y="340" opacity="1"> 
 
      <tspan>2085</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-yaxis-labels"> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="328" opacity="1"> 
 
      <tspan>0</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="266" opacity="1"> 
 
      <tspan>10k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="203" opacity="1"> 
 
      <tspan>20k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="141" opacity="1"> 
 
      <tspan>30k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="78" opacity="1"> 
 
      <tspan>40k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1"> 
 
      <tspan>50k</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)"> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path> 
 
     <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path> 
 
     <text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"></text> 
 
     </g> 
 
     <text x="590" text-anchor="end" style="cursor:pointer;color:#808080;font-size:14px;fill:#808080;" y="395"></text> 
 
    </svg> 
 
    </body> 
 
</html>

+0

मेरे पास प्रिंट स्टाइल शीट नहीं है। यह मुद्दा बिना किसी स्टाइल के सादे HTML के साथ होता है। –

उत्तर

3

प्राथमिक, मेरे प्यारे वाटसन की कोशिश कर सकते।

आपकी समस्या एक HTML दस्तावेज़ के अंदर आईडी डुप्लिकेट करने का मामला है। वर्तमान में आप अपने svg में एक ही आईडी के साथ 2 <clipPath id="highcharts-1"> कर रहे हैं, मुझे लगता है कि आपने किसी प्रकार के टूल के साथ 2 चार्ट जेनरेट किए हैं।

<g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(67,10) scale(1 1)" style="" clip-path="url(#highcharts-1)"> 

इस एसवीजी में एक ही आईडी highcharts-1 के साथ 2 clipPath देखते हैं के रूप में, 2 clipPath 1 एक ओवरराइड करता है, और अपने चार्ट दोनों के साथ काटा जा रहा है: chipPaths बाद में प्रत्येक चार्ट की सामग्री बाहर क्लिप करने के लिए इस्तेमाल कर रहे हैं दूसरे चार्ट का सामग्री क्षेत्र।

इसलिए समाधान clipPath में से 1 की आईडी बदल रहा है और इसकी नई आईडी उचित highcharts-series में उपयोग कर रहा है।

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:Open Sans, Helvetica Neue, Arial, sans-serif;font-size:14px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"> 
 
     <desc>Created with Highstock 4.2.6</desc> 
 
     <defs> 
 
     <clipPath id="highcharts-1"> 
 
      <rect x="0" y="0" width="523" height="330"></rect> 
 
     </clipPath> 
 
     </defs> 
 
     <rect x="0" y="0" width="600" height="400" fill="#FFFFFF" class=" highcharts-background"></rect> 
 
     <rect x="67" y="10" width="523" height="330" fill="rgb(255,255,255)" fill-opacity="0.00"></rect> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 153.5 10 L 153.5 340 240.5 340 240.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 328.5 10 L 328.5 340 415.5 340 415.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 502.5 10 L 502.5 340 589.5 340 589.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 67 340.5 L 590 340.5 590 258.5 67 258.5"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 67 175.5 L 590 175.5 590 93.5 67 93.5"></path> 
 
     <g class="highcharts-grid"></g> 
 
     <g class="highcharts-grid"> 
 
     <path fill="none" d="M 67 340.5 L 590 340.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 258.5 L 590 258.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 175.5 L 590 175.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 93.5 L 590 93.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 67 9.5 L 590 9.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="328.5" text-anchor="middle" transform="translate(0,0)" class=" highcharts-xaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="383"> 
 
      <tspan>Notenverteilung der Bauwerke</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="26" text-anchor="middle" transform="translate(0,0) rotate(270 26 175)" class=" highcharts-yaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="175"> 
 
      <tspan>Anzahl der Bauwerke</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-series-group"> 
 
     <g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(67,10) scale(1 1)" style="" clip-path="url(#highcharts-1)"> 
 
      <rect x="17" y="265" width="53" height="66" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="105" y="282" width="52" height="49" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="192" y="42" width="52" height="289" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="279" y="224" width="52" height="107" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="366" y="323" width="52" height="8" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="453" y="315" width="53" height="16" fill="#3090F0" rx="0" ry="0"></rect> 
 
     </g> 
 
     <g class="highcharts-markers highcharts-series-0" transform="translate(67,10) scale(1 1)" clip-path="none"></g> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-xaxis-labels"> 
 
     <text x="110.58333333333334" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>1,0-1,4</tspan> 
 
     </text> 
 
     <text x="197.75" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>1,5-1,9</tspan> 
 
     </text> 
 
     <text x="284.9166666666667" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>2,0-2,4</tspan> 
 
     </text> 
 
     <text x="372.08333333333337" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>2,5-2,9</tspan> 
 
     </text> 
 
     <text x="459.25" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>3,0-3,4</tspan> 
 
     </text> 
 
     <text x="546.4166666666666" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
 
      <tspan>3,5-4,0</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-yaxis-labels"> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="346" opacity="1"> 
 
      <tspan>0</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="264" opacity="1"> 
 
      <tspan>10</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="181" opacity="1"> 
 
      <tspan>20</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="99" opacity="1"> 
 
      <tspan>30</tspan> 
 
     </text> 
 
     <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1"> 
 
      <tspan>40</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)"> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path> 
 
     <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path> 
 
     </g> 
 
     <text x="590" text-anchor="end" style="cursor:pointer;color:#808080;font-size:14px;fill:#808080;" y="395"></text> 
 
    </svg> 
 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:Open Sans, Helvetica Neue, Arial, sans-serif;font-size:14px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"> 
 
     <desc>Created with Highstock 4.2.6</desc> 
 
     <defs> 
 
     <clipPath id="highcharts-2"> 
 
      <rect x="0" y="0" width="516" height="312"></rect> 
 
     </clipPath> 
 
     </defs> 
 
     <rect x="0" y="0" width="600" height="400" fill="#FFFFFF" class=" highcharts-background"></rect> 
 
     <rect x="74" y="10" width="516" height="312" fill="rgb(255,255,255)" fill-opacity="0.00"></rect> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 77.5 10 L 77.5 322 106.5 322 106.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 135.5 10 L 135.5 322 164.5 322 164.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 193.5 10 L 193.5 322 222.5 322 222.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 251.5 10 L 251.5 322 280.5 322 280.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 309.5 10 L 309.5 322 338.5 322 338.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 367.5 10 L 367.5 322 396.5 322 396.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 425.5 10 L 425.5 322 455.5 322 455.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 484.5 10 L 484.5 322 513.5 322 513.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 542.5 10 L 542.5 322 571.5 322 571.5 10"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 322.5 L 590 322.5 590 260.5 74 260.5"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 197.5 L 590 197.5 590 135.5 74 135.5"></path> 
 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 72.5 L 590 72.5 590 10.5 74 10.5"></path> 
 
     <g class="highcharts-grid"></g> 
 
     <g class="highcharts-grid"> 
 
     <path fill="none" d="M 74 322.5 L 590 322.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 260.5 L 590 260.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 197.5 L 590 197.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 135.5 L 590 135.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 72.5 L 590 72.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     <path fill="none" d="M 74 9.5 L 590 9.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="332" text-anchor="middle" transform="translate(0,0)" class=" highcharts-xaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="382.94112549695427">Jahre</text> 
 
     </g> 
 
     <g class="highcharts-axis"> 
 
     <text x="26" text-anchor="middle" transform="translate(0,0) rotate(270 26 166)" class=" highcharts-yaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="166">Kosten</text> 
 
     </g> 
 
     <g class="highcharts-series-group"> 
 
     <g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(74,10) scale(1 1)" style="" clip-path="url(#highcharts-2)"> 
 
      <rect x="1" y="202" width="5" height="111" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="9" y="132" width="4" height="181" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="16" y="212" width="4" height="101" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="23" y="24" width="5" height="289" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="31" y="300" width="4" height="13" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="38" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="45" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="52" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="60" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="67" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="74" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="81" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="89" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="96" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="103" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="110" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="118" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="125" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="132" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="140" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="147" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="154" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="161" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="169" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="176" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="183" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="190" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="198" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="205" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="212" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="219" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="227" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="234" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="241" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="249" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="256" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="263" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="270" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="278" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="285" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="292" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="299" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="307" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="314" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="321" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="328" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="336" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="343" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="350" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="358" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="365" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="372" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="379" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="387" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="394" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="401" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="408" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="416" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="423" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="430" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="438" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="445" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="452" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="459" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="467" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="474" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="481" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="488" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="496" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="503" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
      <rect x="510" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
 
     </g> 
 
     <g class="highcharts-markers highcharts-series-0" transform="translate(74,10) scale(1 1)" clip-path="none"></g> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-xaxis-labels"> 
 
     <text x="80.93363446243863" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 80.93363446243863 340)" y="340" opacity="1"> 
 
      <tspan>2017</tspan> 
 
     </text> 
 
     <text x="168.14490206807244" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 168.14490206807244 340)" y="340" opacity="1"> 
 
      <tspan>2029</tspan> 
 
     </text> 
 
     <text x="255.35616967370623" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 255.35616967370623 340)" y="340" opacity="1"> 
 
      <tspan>2041</tspan> 
 
     </text> 
 
     <text x="342.5674372793401" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 342.5674372793401 340)" y="340" opacity="1"> 
 
      <tspan>2053</tspan> 
 
     </text> 
 
     <text x="429.7787048849739" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 429.7787048849739 340)" y="340" opacity="1"> 
 
      <tspan>2065</tspan> 
 
     </text> 
 
     <text x="516.9899724906077" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 516.9899724906077 340)" y="340" opacity="1"> 
 
      <tspan>2077</tspan> 
 
     </text> 
 
     <text x="110.0040569976499" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 110.0040569976499 340)" y="340" opacity="1"> 
 
      <tspan>2021</tspan> 
 
     </text> 
 
     <text x="139.07447953286115" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 139.07447953286115 340)" y="340" opacity="1"> 
 
      <tspan>2025</tspan> 
 
     </text> 
 
     <text x="197.2153246032837" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 197.2153246032837 340)" y="340" opacity="1"> 
 
      <tspan>2033</tspan> 
 
     </text> 
 
     <text x="226.28574713849497" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 226.28574713849497 340)" y="340" opacity="1"> 
 
      <tspan>2037</tspan> 
 
     </text> 
 
     <text x="284.4265922089175" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 284.4265922089175 340)" y="340" opacity="1"> 
 
      <tspan>2045</tspan> 
 
     </text> 
 
     <text x="313.49701474412876" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 313.49701474412876 340)" y="340" opacity="1"> 
 
      <tspan>2049</tspan> 
 
     </text> 
 
     <text x="371.63785981455135" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 371.63785981455135 340)" y="340" opacity="1"> 
 
      <tspan>2057</tspan> 
 
     </text> 
 
     <text x="400.7082823497626" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 400.7082823497626 340)" y="340" opacity="1"> 
 
      <tspan>2061</tspan> 
 
     </text> 
 
     <text x="458.84912742018514" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 458.84912742018514 340)" y="340" opacity="1"> 
 
      <tspan>2069</tspan> 
 
     </text> 
 
     <text x="487.9195499553964" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 487.9195499553964 340)" y="340" opacity="1"> 
 
      <tspan>2073</tspan> 
 
     </text> 
 
     <text x="546.0603950258189" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 546.0603950258189 340)" y="340" opacity="1"> 
 
      <tspan>2081</tspan> 
 
     </text> 
 
     <text x="575.1308175610302" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 575.1308175610302 340)" y="340" opacity="1"> 
 
      <tspan>2085</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-axis-labels highcharts-yaxis-labels"> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="328" opacity="1"> 
 
      <tspan>0</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="266" opacity="1"> 
 
      <tspan>10k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="203" opacity="1"> 
 
      <tspan>20k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="141" opacity="1"> 
 
      <tspan>30k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="78" opacity="1"> 
 
      <tspan>40k</tspan> 
 
     </text> 
 
     <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1"> 
 
      <tspan>50k</tspan> 
 
     </text> 
 
     </g> 
 
     <g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)"> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path> 
 
     <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path> 
 
     <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path> 
 
     <text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"></text> 
 
     </g> 
 
     <text x="590" text-anchor="end" style="cursor:pointer;color:#808080;font-size:14px;fill:#808080;" y="395"></text> 
 
    </svg>

जो लोग अपने क्रोम पर बग पुन: पेश नहीं कर सकते हैं के लिए, तो बाहर में पेज जूम करने का प्रयास करें। यह ब्राउज़र को फिर से प्रस्तुत करने के लिए मजबूर करता है (दूसरे clipPath परिभाषित किया गया था) और ओपी की समस्या का अनुकरण करें।

+0

बहुत बहुत धन्यवाद, आपने यह किया। यह बहुत मदद करता है! –

0

मैं कुछ इस तरह की कोशिश करेंगे।

<html> 
    <body> 
    <style type="text/css"> 
    .container{ 
     width:100%; 
    } 
    .Hwidth{ 
     width: 50%; 
     padding: 0 0; 
     display: inline; 
    } 

    .half{ 
     width: 50%; 
    } 

    </style> 
    <div class="container"> 
    <div class="Hwidth"> 
     <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:Open Sans, Helvetica Neue, Arial, sans-serif;font-size:14px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"> 
     <desc>Created with Highstock 4.2.6</desc> 
     <defs> 
      <clipPath id="highcharts-1"> 
      <rect x="0" y="0" width="523" height="330"></rect> 
      </clipPath> 
     </defs> 
     <rect x="0" y="0" class="half" width="600" height="400" fill="#FFFFFF" class="highcharts-background"></rect> 
     <rect x="67" y="10" width="523" height="330" fill="rgb(255,255,255)" fill-opacity="0.00"></rect> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 153.5 10 L 153.5 340 240.5 340 240.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 328.5 10 L 328.5 340 415.5 340 415.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 502.5 10 L 502.5 340 589.5 340 589.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 67 340.5 L 590 340.5 590 258.5 67 258.5"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 67 175.5 L 590 175.5 590 93.5 67 93.5"></path> 
     <g class="highcharts-grid"></g> 
     <g class="highcharts-grid"> 
      <path fill="none" d="M 67 340.5 L 590 340.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 67 258.5 L 590 258.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 67 175.5 L 590 175.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 67 93.5 L 590 93.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 67 9.5 L 590 9.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
     </g> 
     <g class="highcharts-axis"> 
      <text x="328.5" text-anchor="middle" transform="translate(0,0)" class=" highcharts-xaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="383"> 
      <tspan>Notenverteilung der Bauwerke</tspan> 
      </text> 
     </g> 
     <g class="highcharts-axis"> 
      <text x="26" text-anchor="middle" transform="translate(0,0) rotate(270 26 175)" class=" highcharts-yaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="175"> 
      <tspan>Anzahl der Bauwerke</tspan> 
      </text> 
     </g> 
     <g class="highcharts-series-group"> 
      <g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(67,10) scale(1 1)" style="" clip-path="url(#highcharts-1)"> 
      <rect x="17" y="265" width="53" height="66" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="105" y="282" width="52" height="49" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="192" y="42" width="52" height="289" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="279" y="224" width="52" height="107" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="366" y="323" width="52" height="8" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="453" y="315" width="53" height="16" fill="#3090F0" rx="0" ry="0"></rect> 
      </g> 
      <g class="highcharts-markers highcharts-series-0" transform="translate(67,10) scale(1 1)" clip-path="none"></g> 
     </g> 
     <g class="highcharts-axis-labels highcharts-xaxis-labels"> 
      <text x="110.58333333333334" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
      <tspan>1,0-1,4</tspan> 
      </text> 
      <text x="197.75" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
      <tspan>1,5-1,9</tspan> 
      </text> 
      <text x="284.9166666666667" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
      <tspan>2,0-2,4</tspan> 
      </text> 
      <text x="372.08333333333337" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
      <tspan>2,5-2,9</tspan> 
      </text> 
      <text x="459.25" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
      <tspan>3,0-3,4</tspan> 
      </text> 
      <text x="546.4166666666666" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1"> 
      <tspan>3,5-4,0</tspan> 
      </text> 
     </g> 
     <g class="highcharts-axis-labels highcharts-yaxis-labels"> 
      <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="346" opacity="1"> 
      <tspan>0</tspan> 
      </text> 
      <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="264" opacity="1"> 
      <tspan>10</tspan> 
      </text> 
      <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="181" opacity="1"> 
      <tspan>20</tspan> 
      </text> 
      <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="99" opacity="1"> 
      <tspan>30</tspan> 
      </text> 
      <text x="52" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1"> 
      <tspan>40</tspan> 
      </text> 
     </g> 
     <g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)"> 
      <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path> 
      <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path> 
      <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path> 
      <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path> 
     </g> 
     <text x="590" text-anchor="end" style="cursor:pointer;color:#808080;font-size:14px;fill:#808080;" y="395"></text> 
     </svg> 
     </div> 
     <div class="Hwidth"> 
     <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:Open Sans, Helvetica Neue, Arial, sans-serif;font-size:14px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"> 
     <desc>Created with Highstock 4.2.6</desc> 
     <defs> 
      <clipPath id="highcharts-1"> 
      <rect x="0" y="0" width="516" height="312"></rect> 
      </clipPath> 
     </defs> 
     <rect x="0" y="0" width="600" height="400" fill="#FFFFFF" class=" highcharts-background"></rect> 
     <rect x="74" y="10" width="516" height="312" fill="rgb(255,255,255)" fill-opacity="0.00"></rect> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 77.5 10 L 77.5 322 106.5 322 106.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 135.5 10 L 135.5 322 164.5 322 164.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 193.5 10 L 193.5 322 222.5 322 222.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 251.5 10 L 251.5 322 280.5 322 280.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 309.5 10 L 309.5 322 338.5 322 338.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 367.5 10 L 367.5 322 396.5 322 396.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 425.5 10 L 425.5 322 455.5 322 455.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 484.5 10 L 484.5 322 513.5 322 513.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 542.5 10 L 542.5 322 571.5 322 571.5 10"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 322.5 L 590 322.5 590 260.5 74 260.5"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 197.5 L 590 197.5 590 135.5 74 135.5"></path> 
     <path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 74 72.5 L 590 72.5 590 10.5 74 10.5"></path> 
     <g class="highcharts-grid"></g> 
     <g class="highcharts-grid"> 
      <path fill="none" d="M 74 322.5 L 590 322.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 74 260.5 L 590 260.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 74 197.5 L 590 197.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 74 135.5 L 590 135.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 74 72.5 L 590 72.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
      <path fill="none" d="M 74 9.5 L 590 9.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path> 
     </g> 
     <g class="highcharts-axis"> 
      <text x="332" text-anchor="middle" transform="translate(0,0)" class=" highcharts-xaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="382.94112549695427">Jahre</text> 
     </g> 
     <g class="highcharts-axis"> 
      <text x="26" text-anchor="middle" transform="translate(0,0) rotate(270 26 166)" class=" highcharts-yaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="166">Kosten</text> 
     </g> 
     <g class="highcharts-series-group"> 
      <g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(74,10) scale(1 1)" style="" clip-path="url(#highcharts-1)"> 
      <rect x="1" y="202" width="5" height="111" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="9" y="132" width="4" height="181" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="16" y="212" width="4" height="101" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="23" y="24" width="5" height="289" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="31" y="300" width="4" height="13" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="38" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="45" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="52" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="60" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="67" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="74" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="81" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="89" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="96" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="103" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="110" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="118" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="125" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="132" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="140" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="147" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="154" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="161" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="169" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="176" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="183" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="190" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="198" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="205" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="212" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="219" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="227" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="234" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="241" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="249" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="256" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="263" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="270" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="278" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="285" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="292" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="299" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="307" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="314" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="321" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="328" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="336" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="343" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="350" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="358" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="365" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="372" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="379" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="387" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="394" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="401" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="408" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="416" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="423" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="430" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="438" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="445" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="452" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="459" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="467" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="474" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="481" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="488" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="496" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="503" y="313" width="4" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      <rect x="510" y="313" width="5" height="0" fill="#3090F0" rx="0" ry="0"></rect> 
      </g> 
      <g class="highcharts-markers highcharts-series-0" transform="translate(74,10) scale(1 1)" clip-path="none"></g> 
     </g> 
     <g class="highcharts-axis-labels highcharts-xaxis-labels"> 
      <text x="80.93363446243863" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 80.93363446243863 340)" y="340" opacity="1"> 
      <tspan>2017</tspan> 
      </text> 
      <text x="168.14490206807244" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 168.14490206807244 340)" y="340" opacity="1"> 
      <tspan>2029</tspan> 
      </text> 
      <text x="255.35616967370623" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 255.35616967370623 340)" y="340" opacity="1"> 
      <tspan>2041</tspan> 
      </text> 
      <text x="342.5674372793401" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 342.5674372793401 340)" y="340" opacity="1"> 
      <tspan>2053</tspan> 
      </text> 
      <text x="429.7787048849739" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 429.7787048849739 340)" y="340" opacity="1"> 
      <tspan>2065</tspan> 
      </text> 
      <text x="516.9899724906077" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 516.9899724906077 340)" y="340" opacity="1"> 
      <tspan>2077</tspan> 
      </text> 
      <text x="110.0040569976499" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 110.0040569976499 340)" y="340" opacity="1"> 
      <tspan>2021</tspan> 
      </text> 
      <text x="139.07447953286115" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 139.07447953286115 340)" y="340" opacity="1"> 
      <tspan>2025</tspan> 
      </text> 
      <text x="197.2153246032837" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 197.2153246032837 340)" y="340" opacity="1"> 
      <tspan>2033</tspan> 
      </text> 
      <text x="226.28574713849497" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 226.28574713849497 340)" y="340" opacity="1"> 
      <tspan>2037</tspan> 
      </text> 
      <text x="284.4265922089175" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 284.4265922089175 340)" y="340" opacity="1"> 
      <tspan>2045</tspan> 
      </text> 
      <text x="313.49701474412876" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 313.49701474412876 340)" y="340" opacity="1"> 
      <tspan>2049</tspan> 
      </text> 
      <text x="371.63785981455135" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 371.63785981455135 340)" y="340" opacity="1"> 
      <tspan>2057</tspan> 
      </text> 
      <text x="400.7082823497626" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 400.7082823497626 340)" y="340" opacity="1"> 
      <tspan>2061</tspan> 
      </text> 
      <text x="458.84912742018514" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 458.84912742018514 340)" y="340" opacity="1"> 
      <tspan>2069</tspan> 
      </text> 
      <text x="487.9195499553964" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 487.9195499553964 340)" y="340" opacity="1"> 
      <tspan>2073</tspan> 
      </text> 
      <text x="546.0603950258189" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 546.0603950258189 340)" y="340" opacity="1"> 
      <tspan>2081</tspan> 
      </text> 
      <text x="575.1308175610302" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 575.1308175610302 340)" y="340" opacity="1"> 
      <tspan>2085</tspan> 
      </text> 
     </g> 
     <g class="highcharts-axis-labels highcharts-yaxis-labels"> 
      <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="328" opacity="1"> 
      <tspan>0</tspan> 
      </text> 
      <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="266" opacity="1"> 
      <tspan>10k</tspan> 
      </text> 
      <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="203" opacity="1"> 
      <tspan>20k</tspan> 
      </text> 
      <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="141" opacity="1"> 
      <tspan>30k</tspan> 
      </text> 
      <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="78" opacity="1"> 
      <tspan>40k</tspan> 
      </text> 
      <text x="59" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1"> 
      <tspan>50k</tspan> 
      </text> 
     </g> 
     <g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)"> 
      <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path> 
      <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path> 
      <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path> 
      <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path> 
      <text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"></text> 
     </g> 
     <text x="590" text-anchor="end" style="cursor:pointer;color:#808080;font-size:14px;fill:#808080;" y="395"></text> 
     </svg> 
     </div> 
     </div> 
    </body> 
    </html> 
    </html> 

या हो सकता है @media print issue with SVG not displaying

संबंधित मुद्दे