Menu
▾
▴
[HtmlUnit] [htmlunit:bugs] #1644 label alignment is incorrect
|
From: RBRi <rb...@us...> - 2020-01-04 17:02:52
|
Have tested it again - looks good with the current snapshot code.
Will close this. Please open a new issue on github if you need more fixes.
---
** [bugs:#1644] label alignment is incorrect**
**Status:** open
**Group:** 2.15
**Labels:** svg
**Created:** Mon Sep 29, 2014 09:33 AM UTC by jerrywell
**Last Updated:** Thu Mar 07, 2019 07:57 PM UTC
**Owner:** nobody
when we create the web client to visit Highchart page in order to the server side rendering. after we execute javascript to get SVG DOM from Highchart, the result will lose horizontal alignment shown as the following photos.
this is my JAVA file.
```
WebClient client = new WebClient(BrowserVersion.CHROME);
HtmlPage currentPage = client.getPage("issue/xxxx.zul");
client.waitForBackgroundJavaScript(10000);
String svg = currentPage.executeJavaScript("chart.getSVG()").getJavaScriptResult().toString();
```
this is the SVG DOM generated in Chrome browser.
```
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="600" height="400">
<desc>Created with Highcharts 3.0.9</desc>
<defs>
<clipPath id="highcharts-3">
<rect fill="none" x="0" y="0" width="580" height="345"></rect>
</clipPath>
</defs>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-tracker" visibility="visible"
transform="translate(10,40) scale(1 1)" style="cursor:pointer;">
<path fill="none"
d="M 465.37623875266127 157.51505478056018 C 460.37623875266127 157.51505478056018 452.47473202790013 158.766530500882 441.6101602813536 160.48730961632455 L 430.7455885348071 162.2080887317671"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 198.12499771783115 333.526789465764 C 203.12499771783115 333.526789465764 207.1539833309174 326.6154021282214 212.69383854891078 317.1122445391002 L 218.23369376690414 307.609086949979"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 115.97500346371763 150.05002836126488 C 120.97500346371763 150.05002836126488 128.81384388279162 151.64770820538013 139.59224945901832 153.8445179910386 L 150.37065503524502 156.04132777669707"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 167.7225511873661 58 C 172.7225511873661 58 183.95384312076118 58.744433080901615 191.0450754956647 67.1536199265556 L 198.1363078705682 75.5628067722096"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 198.94188010419947 35 C 203.94188010419947 35 251.09591498959713 24.66657993553642 253.69740395685812 35.35452899759781 L 256.2988929241191 46.0424780596592"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 281.2068326240386 12 C 286.2068326240386 12 286.3827476327828 20.039775370116224 286.6246307698004 31.037115618923043 L 286.86651390681794 42.03445586772986"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="#2f7ed8"
d="M 289.9709765684734 42.50000295564777 A 142.5 142.5 0 0 1 334.1212508606259 320.49747312217187 L 290 185 A 0 0 0 0 0 290 185 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#0d233a"
d="M 333.98573134946304 320.5415266169479 A 142.5 142.5 0 0 1 150.38577839260248 213.53277282285228 L 290 185 A 0 0 0 0 0 290 185 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#8bbc21"
d="M 150.35731543164013 213.39314435812872 A 142.5 142.5 0 0 1 172.5837143121297 104.25555217066388 L 290 185 A 0 0 0 0 0 290 185 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"
transform="translate(-10,-2)" visibility="visible"></path>
<path fill="#910000"
d="M 172.66451745463962 104.13817627676599 A 142.5 142.5 0 0 1 230.0279904524795 55.73435077008247 L 290 185 A 0 0 0 0 0 290 185 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#1aadce"
d="M 230.1572860661675 55.67444340334956 A 142.5 142.5 0 0 1 283.53429089427783 42.646761168703335 L 290 185 A 0 0 0 0 0 290 185 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#492970"
d="M 283.67664734223797 42.64036663728879 A 142.5 142.5 0 0 1 289.8020703588248 42.50013746021688 L 290 185 A 0 0 0 0 0 290 185 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
</g>
<g class="highcharts-markers" visibility="visible"
transform="translate(10,40) scale(1 1)"></g>
</g>
<text x="300" y="25"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:16px;color:#274b6d;fill:#274b6d;"
text-anchor="middle" class="highcharts-title">
<tspan x="300">Browser market shares at a specific website, 2010
</tspan>
</text>
<g class="highcharts-data-labels highcharts-tracker" visibility="visible"
transform="translate(10,40) scale(1 1)" style="cursor:pointer;">
<g style="cursor:pointer;" transform="translate(470,148)"
visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Firefox</tspan>
<tspan dx="0">: 45.0 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(138,324)"
visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">IE</tspan>
<tspan dx="0">: 26.8 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(22,140)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Chrome</tspan>
<tspan dx="0">: 12.8 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(93,48)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Safari</tspan>
<tspan dx="0">: 8.5 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(122,25)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Opera</tspan>
<tspan dx="0">: 6.2 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(201,2)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Others</tspan>
<tspan dx="0">: 0.7 %</tspan>
</text>
</g>
</g>
<g class="highcharts-legend">
<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="7" height="7"
stroke="#909090" stroke-width="1" visibility="hidden"></rect>
<g>
<g></g>
</g>
</g>
<g class="highcharts-tooltip" style="cursor:default;padding:0;white-space:nowrap;"
transform="translate(0,-999)">
<rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16"
height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.049999999999999996"
stroke-width="5" transform="translate(1, 1)"></rect>
<rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16"
height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.09999999999999999"
stroke-width="3" transform="translate(1, 1)"></rect>
<rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16"
height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.15"
stroke-width="1" transform="translate(1, 1)"></rect>
<rect rx="3" ry="3" fill="rgb(255,255,255)" x="0.5" y="0.5"
width="16" height="16" fill-opacity="0.85"></rect>
<text x="8" y="21"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;"></text>
</g>
</svg>
```
this is the SVG DOM generated in HtmlUnit.
```
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="600" height="400">
<desc>Created with Highcharts 3.0.9</desc>
<defs>
<clipPath id="highcharts-5">
<rect fill="none" x="0" y="0" width="580" height="375"></rect>
</clipPath>
</defs>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-tracker" visibility="visible"
transform="translate(10,10) scale(1 1)" style="cursor:pointer;">
<path fill="none"
d="M 482.1669405427786 170.85566887487624 C 477.1669405427786 170.85566887487624 469.2654338180175 172.10714459519806 458.400862071471 173.82792371064062 L 447.5362903249245 175.54870282608317"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 189.5634032900233 364.2134875580423 C 194.5634032900233 364.2134875580423 198.59238890310942 357.30210022049965 204.1322441211028 347.79894263137845 L 209.67209933909615 338.29578504225725"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 99.31746757318521 162.65495869251993 C 104.31746757318521 162.65495869251993 112.1563079922592 164.25263853663517 122.93471356848592 166.44944832229365 L 133.71311914471264 168.64625810795212"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 162.8374059050713 55.63264479532426 C 167.8374059050713 55.63264479532426 172.99466581409203 61.74841704670898 180.08589818899554 70.15760389236299 L 187.17713056389906 78.56679073801699"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 198.29359885221854 32 C 203.29359885221854 32 247.07543204019373 24.14884047598673 249.67692100745472 34.83678953804814 L 252.27840997471571 45.52473860010954"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="none"
d="M 280.8330132304694 11 C 285.8330132304694 11 286.0089282392102 19.0438858946874 286.2508113762278 30.041226143494224 L 286.49269451324534 41.03856639230105"
stroke="#000000" stroke-width="1" visibility="visible"></path>
<path fill="#2f7ed8"
d="M 289.9675141240106 41.50000330825125 A 159.5 159.5 0 0 1 339.3848386825954 352.66208395078195 L 290 201 A 0 0 0 0 0 290 201 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#0d233a"
d="M 339.2331519315043 352.71139295019805 A 159.5 159.5 0 0 1 133.73004669207086 232.9366825631224 L 290 201 A 0 0 0 0 0 290 201 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#8bbc21"
d="M 133.69818814980067 232.78039666751954 A 159.5 159.5 0 0 1 158.5761574230503 110.62288120155 L 290 201 A 0 0 0 0 0 290 201 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"
transform="translate(-10,-2)" visibility="visible"></path>
<path fill="#910000"
d="M 158.6666002387017 110.49150256943268 A 159.5 159.5 0 0 1 222.8734349275121 56.31318559879395 L 290 201 A 0 0 0 0 0 290 201 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#1aadce"
d="M 223.01815528107863 56.246131388310374 A 159.5 159.5 0 0 1 282.7629431413145 41.66426951865395 L 290 201 A 0 0 0 0 0 290 201 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
<path fill="#492970"
d="M 282.9222824637681 41.65711213086004 A 159.5 159.5 0 0 1 289.7784576998776 41.50015385897936 L 290 201 A 0 0 0 0 0 290 201 Z"
stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"
visibility="visible"></path>
</g>
<g class="highcharts-markers" visibility="visible"
transform="translate(10,10) scale(1 1)"></g>
</g>
<text x="300" y="25"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:16px;color:#274b6d;fill:#274b6d;"
text-anchor="middle" class="highcharts-title">
<tspan x="300">Browser market shares at a specific website, 2010
</tspan>
</text>
<g class="highcharts-data-labels highcharts-tracker" visibility="visible"
transform="translate(10,10) scale(1 1)" style="cursor:pointer;">
<g style="cursor:pointer;" transform="translate(0,161)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Firefox</tspan>
<tspan dx="0">: 45.0 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(0,354)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">IE</tspan>
<tspan dx="0">: 26.8 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(0,153)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Chrome</tspan>
<tspan dx="0">: 12.8 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(0,46)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Safari</tspan>
<tspan dx="0">: 8.5 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(0,22)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Opera</tspan>
<tspan dx="0">: 6.2 %</tspan>
</text>
</g>
<g style="cursor:pointer;" transform="translate(0,1)" visibility="visible">
<text x="3" y="15"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;color:#000000;fill:#000000;">
<tspan style="font-weight:bold" x="3">Others</tspan>
<tspan dx="0">: 0.7 %</tspan>
</text>
</g>
</g>
<g class="highcharts-legend">
<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="7" height="7"
stroke="#909090" stroke-width="1" visibility="hidden"></rect>
<g>
<g></g>
</g>
</g>
<g class="highcharts-tooltip" style="cursor:default;padding:0;white-space:nowrap;"
transform="translate(0,-999)">
<rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16"
height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.049999999999999996"
stroke-width="5" transform="translate(1, 1)"></rect>
<rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16"
height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.09999999999999999"
stroke-width="3" transform="translate(1, 1)"></rect>
<rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16"
height="16" fill-opacity="0.85" stroke="black" stroke-opacity="0.15"
stroke-width="1" transform="translate(1, 1)"></rect>
<rect rx="3" ry="3" fill="rgb(255,255,255)" x="0.5" y="0.5"
width="16" height="16" fill-opacity="0.85"></rect>
<text x="8" y="21"
style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;"></text>
</g>
</svg>
```
SVG DOM result generated in chrome
SVG DOM result generated in HtmlUnit
---
Sent from sourceforge.net because htm...@li... is subscribed to https://sourceforge.net/p/htmlunit/bugs/
To unsubscribe from further messages, a project admin can change settings at https://sourceforge.net/p/htmlunit/admin/bugs/options. Or, if this is a mailing list, you can unsubscribe from the mailing list. |
){kind=link}
){kind=link}