search

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
654 stars 100 forks source link

Svg rotation is calculated wrong when the y coordinate is 0 #120

Closed Anderman closed 4 years ago

Anderman commented 4 years ago

Svg Rotation with y = 0 is rendered outside the image.

the error is in line https://github.com/yWorks/svg2pdf.js/blob/master/src/svg2pdf.js#L620 this should be an OR if (m[1] && m[2]) { In the Image '55' is draw outside the highchart image

When I change this line to if (m[1] || m[2]) { The image is correct inside the highchart. image

svg code

<svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="860.520720124746" height="200" 
viewBox="0 0 860.520720124746 200"><desc>Created with Highcharts 7.2.1</desc><defs><clipPath id="highcharts-6sl7q1f-50-"><rect x="0" y="0" width="841" height="111" fill="none"></rect></clipPath></defs><rect fill="rgba(255,255,0,0.6)" class="highcharts-background" x="0" y="0" width="860.520720124746" height="200" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="10" y="74" width="841" height="111"></rect><g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1"></g><g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1"></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" x="10" y="74" width="841" height="111"></rect><g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 10 185 L 851 185"></path></g><g class="highcharts-axis highcharts-yaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 10 74 L 10 185"></path></g><g class="highcharts-series-group" data-z-index="3">
<g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-wordcloud-series highcharts-tracker" transform="translate(430.5,129.5) scale(1.9810373675404351 1.9810373675404351)">
<text x="0" style="font-size:25px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#7cb5ec" opacity="1" text-anchor="middle" alignment-baseline="middle" y="0" class="highcharts-point highcharts-color-0" transform="translate(0,0)">59</text>
<text x="75.76576576576576" style="font-size:25px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#434348" opacity="1" text-anchor="middle" alignment-baseline="middle" y="5" class="highcharts-point highcharts-color-1" transform="translate(0,0) rotate(90 75.76576576576576 5)">32</text>
<text x="-37.88288288288288" style="font-size:25px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#90ed7d" opacity="1" text-anchor="middle" alignment-baseline="middle" y="10" class="highcharts-point highcharts-color-2" transform="translate(0,0)">56</text>
<text x="-75.76576576576576" style="font-size:20px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#f7a35c" opacity="1" text-anchor="middle" alignment-baseline="middle" y="-5" class="highcharts-point highcharts-color-3" transform="translate(0,0) rotate(90 -75.76576576576576 -5)">50</text>
<text x="37.88288288288288" style="font-size:20px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#8085e9" opacity="1" text-anchor="middle" alignment-baseline="middle" y="-10" class="highcharts-point highcharts-color-4" transform="translate(0,0)">42</text>
<text x="113.64864864864866" style="font-size:15px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#f15c80" opacity="1" text-anchor="middle" alignment-baseline="middle" y="0" class="highcharts-point highcharts-color-5" transform="translate(0,0) rotate(90 113.64864864864866 0)">55</text>
<text x="-113.64864864864866" style="font-size:15px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#e4d354" opacity="1" text-anchor="middle" alignment-baseline="middle" y="0" class="highcharts-point highcharts-color-6" transform="translate(0,0)">43</text>
<text x="151.53153153153153" style="font-size:15px;font-family:sans-serif;font-weight:900;white-space:nowrap;" fill="#2b908f" opacity="1" text-anchor="middle" alignment-baseline="middle" y="-5" class="highcharts-point highcharts-color-7" transform="translate(0,0) rotate(90 151.53153153153153 -5)">30</text></g>

<g data-z-index="0.1" class="highcharts-markers highcharts-series-0 highcharts-wordcloud-series" transform="translate(430.5,129.5) scale(1 1)"></g></g><g class="highcharts-exporting-group" data-z-index="3"><g class="highcharts-button highcharts-contextbutton" stroke-linecap="round" transform="translate(827,10)"><title>Opties</title><rect fill="#ffffff" class="highcharts-button-box" x="0.5" y="0.5" width="24" height="22" rx="2" ry="2" stroke="none" stroke-width="1"></rect><path fill="#666666" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" class="highcharts-button-symbol" data-z-index="1" stroke="#666666" stroke-width="3"></path>
<text x="0" data-z-index="1" style="font-weight:normal;color:#333333;cursor:pointer;fill:#333333;" y="12"></text></g></g>
<text x="430" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"><tspan>Hoe oud ben je?</tspan><tspan x="430" dy="21">N: 64</tspan></text>
<text x="430" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="73"></text>
<text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color:#666666;fill:#666666;" y="197"></text><g class="highcharts-legend" data-z-index="7"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="8" height="8" visibility="hidden"></rect><g data-z-index="1"><g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7"></g><g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"></g>
<text x="851" class="highcharts-credits" text-anchor="end" data-z-index="8" style="cursor:pointer;color:#999999;font-size:9px;fill:#999999;" y="195"><tspan>© MijnZorgPeiler</tspan></text></svg>