jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

6
2-ui/1-document/11-coordinates/article.md
View file

@ -13,7 +13,7 @@ When the page is scrolled to the top, so that the top/left corner of the window
Here's the picture, the left part is before the scroll, and the right part - after scrolling the page up:
![](document-and-window-coordinates-scrolled.png)
![](document-and-window-coordinates-scrolled.svg)
As the document moved up:
- `pageY` - document-relative coordinate of the same point stayed the same, it's counted from the document top (now scrolled out).
@ -60,7 +60,7 @@ If you scroll the page and repeat, you'll notice that as window-relative button
Here's the picture of `elem.getBoundingClientRect()` output:
![](coordinates.png)
![](coordinates.svg)
As you can see, `x/y` and `width/height` fully describe the rectangle. Derived properties can be easily calculated:
- `left = x`
@ -80,7 +80,7 @@ Technically it's possible for `width/height` to be negative, that's useful for
Here's a rectangle with negative `width` and `height` (e.g. `width=-200`, `height=-100`):
![](coordinates-negative.png)
![](coordinates-negative.svg)
The rectangle starts at its bottom-right corner and then spans left/up, as negative `width/height` lead it backwards by coordinates.

BIN
2-ui/1-document/11-coordinates/coordinates-negative.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

64
2-ui/1-document/11-coordinates/coordinates-negative.svg Normal file
View file

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="521px" height="411px" viewBox="0 0 521 411" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>coordinates-negative.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<filter x="-2.3%" y="-13.6%" width="104.5%" height="127.3%" filterUnits="objectBoundingBox" id="filter-1">
<feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
</filter>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="coordinates-negative.svg">
<g id="noun_69008_cc" transform="translate(13.000000, 11.000000)" fill="#E8C48E">
<path d="M455.3125,330 L9.6875,330 C4.34,330 0,326.2875 0,321.75 L0,8.25 C0,3.7125 4.34,0 9.6875,0 L455.3125,0 C460.640625,0 465,3.7125 465,8.25 L465,321.75 C465,326.2875 460.640625,330 455.3125,330 L455.3125,330 Z M9.43204868,318.938547 L453.681542,318.938547 L453.681542,11.0614525 L9.43204868,11.0614525 L9.43204868,318.938547 L9.43204868,318.938547 Z" id="Shape"></path>
<path d="M19.673913,46 C14.333913,46 10,44.875 10,43.5 C10,42.125 14.333913,41 19.673913,41 L445.326087,41 C450.646739,41 455,42.125 455,43.5 C455,44.875 450.646739,46 445.326087,46 L19.673913,46 Z" id="Shape"></path>
<path d="M31,27.5 C31,30.53875 28.53875,33 25.5,33 C22.46125,33 20,30.53875 20,27.5 C20,24.46125 22.46125,22 25.5,22 C28.53875,22 31,24.46125 31,27.5 L31,27.5 Z" id="Shape"></path>
<path d="M59,27.5 C59,30.53875 56.53875,33 53.5,33 C50.46125,33 48,30.53875 48,27.5 C48,24.46125 50.46125,22 53.5,22 C56.53875,22 59,24.46125 59,27.5 L59,27.5 Z" id="Shape"></path>
<path d="M87,27.5 C87,30.53875 84.53875,33 81.5,33 C78.46125,33 76,30.53875 76,27.5 C76,24.46125 78.46125,22 81.5,22 C84.53875,22 87,24.46125 87,27.5 L87,27.5 Z" id="Shape"></path>
</g>
<text id="bottom" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="414" y="196">bottom</tspan>
</text>
<path d="M392,290 L392,327" id="Line-30-Copy-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M394,288 L463,288" id="Line-29-Copy" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="(x,y)" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="395" y="305">(x,y)</tspan>
</text>
<text id="(x,y)-copy" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="395" y="305">(x,y)</tspan>
</text>
<text id="left" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="50" y="129">left</tspan>
</text>
<path id="Line-Copy" d="M407,269.5 L407,59 L410,59 L410,269.5 L418,269.5 L408.5,288.5 L399,269.5 L407,269.5 Z" fill="#999999" fill-rule="nonzero"></path>
<text id="right" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="188" y="323">right</tspan>
</text>
<path id="Line-3-Copy-2" d="M371,306 L21.0045776,306 L21.0045776,303 L371,303 L371,295 L390,304.5 L371,314 L371,306 Z" fill="#999999" fill-rule="nonzero"></path>
<path d="M382,123 L129,123 L129,278 L382,278 L382,123 Z M118,113 L392.628906,113 L392.628906,288 L118,288 L118,113 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="Introduction-This-Ec" opacity="0.7" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="138.946273" y="147.8">Introduction</tspan>
<tspan x="239.672835" y="147.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="138.946273" y="175.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan>
<tspan x="138.946273" y="194.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan>
<tspan x="138.946273" y="213.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan>
<tspan x="138.946273" y="232.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan>
<tspan x="138.946273" y="251.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan>
<tspan x="138.946273" y="270.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan>
</text>
<text id="top" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="125" y="90">top</tspan>
</text>
<path id="Line-3" d="M99.9923616,114.902612 L21.9921261,114.492085 L22.0079154,111.492126 L100.008151,111.902654 L100.050256,103.902765 L118.999993,113.502632 L99.9502569,122.902501 L99.9923616,114.902612 Z" fill="#999999" fill-rule="nonzero"></path>
<path id="Line-2" d="M134.422652,122.148497 L391.570294,285.387525 L389.962475,287.920294 L132.814833,124.681266 L128.527317,131.435317 L117.577872,113.23203 L138.710168,115.394446 L134.422652,122.148497 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3-Copy" d="M116.002972,94.7501302 L115.99987,59.0001302 L118.99987,58.9998698 L119.002972,94.7498699 L127.002972,94.7491757 L117.504621,113.75 L108.002972,94.7508245 L116.002972,94.7501302 Z" fill="#999999" fill-rule="nonzero"></path>
<g id="Group" transform="translate(270.970081, 195.848048) rotate(32.500000) translate(-270.970081, -195.848048) translate(204.470081, 184.848048)">
<rect id="Rectangle" fill="#FFFFFF" filter="url(#filter-1)" x="0" y="0" width="133" height="22"></rect>
<text id="(width,height)" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="8.68187117" y="15.3779674">(width,height)</tspan>
</text>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
2-ui/1-document/11-coordinates/coordinates-negative@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 112 KiB

BIN
2-ui/1-document/11-coordinates/coordinates.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

62
2-ui/1-document/11-coordinates/coordinates.svg Normal file
View file

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="521px" height="411px" viewBox="0 0 521 411" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>coordinates.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="coordinates.svg">
<g id="noun_69008_cc" transform="translate(13.000000, 11.000000)" fill="#E8C48E">
<path d="M490.5625,386 L10.4375,386 C4.676,386 0,381.6575 0,376.35 L0,9.65 C0,4.3425 4.676,0 10.4375,0 L490.5625,0 C496.303125,0 501,4.3425 501,9.65 L501,376.35 C501,381.6575 496.303125,386 490.5625,386 L490.5625,386 Z M10.1622718,373.061453 L488.805274,373.061453 L488.805274,12.9385475 L10.1622718,12.9385475 L10.1622718,373.061453 L10.1622718,373.061453 Z" id="Shape"></path>
<path d="M20.8588913,54.1005587 C15.1062833,54.1005587 10.4375,52.952933 10.4375,51.5502793 C10.4375,50.1476257 15.1062833,49 20.8588913,49 L479.40011,49 C485.131875,49 489.821501,50.1476257 489.821501,51.5502793 C489.821501,52.952933 485.131875,54.1005587 479.40011,54.1005587 L20.8588913,54.1005587 Z" id="Shape"></path>
<path d="M33.8,31.6271484 C33.8,34.9571479 31.1038125,37.6542969 27.775,37.6542969 C24.4461875,37.6542969 21.75,34.9571479 21.75,31.6271484 C21.75,28.2971489 24.4461875,25.6 27.775,25.6 C31.1038125,25.6 33.8,28.2971489 33.8,31.6271484 L33.8,31.6271484 Z" id="Shape"></path>
<path d="M63.9882812,31.6271484 C63.9882812,34.9571479 61.2920937,37.6542969 57.9632812,37.6542969 C54.6344687,37.6542969 51.9382812,34.9571479 51.9382812,31.6271484 C51.9382812,28.2971489 54.6344687,25.6 57.9632812,25.6 C61.2920937,25.6 63.9882812,28.2971489 63.9882812,31.6271484 L63.9882812,31.6271484 Z" id="Shape"></path>
<path d="M94.1765625,31.6271484 C94.1765625,34.9571479 91.480375,37.6542969 88.1515625,37.6542969 C84.82275,37.6542969 82.1265625,34.9571479 82.1265625,31.6271484 C82.1265625,28.2971489 84.82275,25.6 88.1515625,25.6 C91.480375,25.6 94.1765625,28.2971489 94.1765625,31.6271484 L94.1765625,31.6271484 Z" id="Shape"></path>
</g>
<text id="height" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="417" y="208">height</tspan>
</text>
<text id="bottom" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="451" y="311">bottom</tspan>
</text>
<path d="M395,293 L498,293" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M392,296 L392,370.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M119,296 L119,342" id="Line-30-Copy" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M396,120 L426,120" id="Line-29" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="x" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="62" y="113">x</tspan>
</text>
<text id="left" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="50" y="135">left</tspan>
</text>
<text id="y" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="125" y="79">y</tspan>
</text>
<text id="width" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="234" y="339">width</tspan>
</text>
<path id="Line" d="M411,273 L411,118.5 L414,118.5 L414,273 L422,273 L412.5,292 L403,273 L411,273 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M473,273 L473,65 L476,65 L476,273 L484,273 L474.5,292 L465,273 L473,273 Z" fill="#999999" fill-rule="nonzero"></path>
<path id="Line-2" d="M371,320 L116,320 L116,317 L371,317 L371,309 L390,318.5 L371,328 L371,320 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M99.9923616,120.902612 L21.9921261,120.492085 L22.0079154,117.492126 L100.008151,117.902654 L100.050256,109.902765 L118.999993,119.502632 L99.9502569,128.902501 L99.9923616,120.902612 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="right" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="180" y="375">right</tspan>
</text>
<path id="Line-3-Copy-2" d="M371,361 L21.0045776,361 L21.0045776,358 L371,358 L371,350 L390,359.5 L371,369 L371,361 Z" fill="#999999" fill-rule="nonzero"></path>
<path id="Line-3-Copy" d="M116.002972,100.75013 L115.99987,65.0001302 L118.99987,64.9998698 L119.002972,100.74987 L127.002972,100.749176 L117.504621,119.75 L108.002972,100.750824 L116.002972,100.75013 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M382,129 L129,129 L129,284 L382,284 L382,129 Z M118,119 L392.628906,119 L392.628906,294 L118,294 L118,119 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="Introduction-This-Ec" opacity="0.8" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="138.946273" y="153.8">Introduction</tspan>
<tspan x="239.672835" y="153.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="138.946273" y="181.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan>
<tspan x="138.946273" y="200.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan>
<tspan x="138.946273" y="219.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan>
<tspan x="138.946273" y="238.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan>
<tspan x="138.946273" y="257.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan>
<tspan x="138.946273" y="276.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan>
</text>
<text id="top" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="125" y="96">top</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
2-ui/1-document/11-coordinates/coordinates@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 99 KiB

113
2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.svg Normal file
View file

@ -0,0 +1,113 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="728px" height="358px" viewBox="0 0 728 358" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>document-and-window-coordinates-scrolled.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="document-and-window-coordinates-scrolled.svg">
<rect fill="#FFFFFF" x="0" y="0" width="728" height="358"></rect>
<text id="Introduction-This-Ec" opacity="0.7" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="34" y="176">Introduction</tspan>
<tspan x="134.726562" y="176" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="34" y="204" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="34" y="223" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="34" y="242" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="34" y="261" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="34" y="280" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="34" y="299" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="34" y="318" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. </tspan>
<tspan x="34" y="337" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"> </tspan>
<tspan x="34" y="356" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">It has appeared in all subsequent browsers </tspan>
<tspan x="34" y="375" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">from Netscape and in all browsers from </tspan>
<tspan x="34" y="394" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Microsoft starting with Internet Explorer </tspan>
<tspan x="34" y="413" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">3.0. The development of this Standard </tspan>
<tspan x="34" y="432" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">started in November 1996. </tspan>
<tspan x="34" y="451" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">The first edition of this Ecma Standard was </tspan>
<tspan x="34" y="470" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">adopted by the Ecma General Assembly of </tspan>
<tspan x="34" y="489" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">June 1997.</tspan>
<tspan x="34" y="508" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="34" y="527" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="34" y="546" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="34" y="565" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">standard ISO/IEC 16262, in April 1998. The </tspan>
<tspan x="34" y="584" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma General Assembly of June 1998 </tspan>
<tspan x="34" y="603" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="34" y="622" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">to keep it fully aligned with ISO/IEC 16262. </tspan>
<tspan x="34" y="641" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Changes between the first and the second </tspan>
<tspan x="34" y="660" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition are editorial in nature.</tspan>
</text>
<text id="😍" font-family="AppleColorEmoji, Apple Color Emoji" font-size="18" font-weight="normal" fill="#5A4739">
<tspan x="139" y="330">😍</tspan>
</text>
<path id="Line-39" d="M148.5,298 L148.5,131 L150.5,131 L150.5,298 L156.5,298 L149.5,312 L142.5,298 L148.5,298 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="155">pageY</tspan>
</text>
<text id="clientY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="156.4" y="177">clientY</tspan>
</text>
<path id="Line-39-Copy" d="M126,323.5 L13,323.5 L12,323.5 L12,321.5 L126,321.5 L126,315.5 L140,322.5 L126,329.5 L126,323.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="23" y="316">pageX</tspan>
</text>
<text id="clientX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="22.4" y="337">clientX</tspan>
</text>
<g id="np_browser_551045_E8C48F" transform="translate(-1.000000, 68.000000)" fill="#E8C48F" fill-rule="nonzero">
<path d="M22.8007131,0 C7.75885978,0 0,8.15688571 0,24 L0,266 C0,281.843114 7.75885978,290 22.8007131,290 L332.145811,290 C347.187664,290 354,282.843114 354,267 L354,24 C354,8.15688571 347.187664,0 332.145811,0 L22.8007131,0 Z M17.3747837,15.2857143 L335.552488,15.2857143 C338.087318,15.2857143 339.739037,17.2978173 339.739037,20.3857143 L338,55.328125 L13.188235,55.328125 L13.188235,20.3857143 C13.188235,17.2978173 14.8399541,15.2857143 17.3747837,15.2857143 Z M38.5340462,29.1428571 C34.6323815,29.1428571 31.4666667,32.4703619 31.4666667,36.5714286 C31.4666667,40.6724953 34.6323815,44.0000001 38.5340462,44.0000001 C42.4357108,44.0000001 45.6014257,40.6724953 45.6014257,36.5714286 C45.6014257,32.4703619 42.4357108,29.1428571 38.5340462,29.1428571 Z M70.0007129,29.1428571 C66.0990482,29.1428571 62.9333333,32.4703619 62.9333333,36.5714286 C62.9333333,40.6724953 66.0990482,44.0000001 70.0007129,44.0000001 C73.9023775,44.0000001 77.0680924,40.6724953 77.0680924,36.5714286 C77.0680924,32.4703619 73.9023775,29.1428571 70.0007129,29.1428571 Z M101.46738,29.1428571 C97.5657149,29.1428571 94.4,32.4703619 94.4,36.5714286 C94.4,40.6724953 97.5657149,44.0000001 101.46738,44.0000001 C105.369044,44.0000001 108.534759,40.6724953 108.534759,36.5714286 C108.534759,32.4703619 105.369044,29.1428571 101.46738,29.1428571 Z M14,71.171875 L338,71.171875 L339.86524,269.547619 C339.86524,272.329898 338.213521,274.142857 335.678691,274.142857 C263.454865,274.142857 209.286995,274.142857 173.175081,274.142857 C138.580838,274.142857 86.6894732,274.142857 17.5009866,274.142857 C14.9661569,274.142857 13.3144379,272.329898 13.3144379,269.547619 L14,71.171875 Z" id="Shape"></path>
</g>
<text id="Introduction-This-Ec" opacity="0.7" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="409" y="34">Introduction</tspan>
<tspan x="509.726562" y="34" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="409" y="62" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="409" y="81" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="409" y="100" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="409" y="119" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="409" y="138" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="409" y="157" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="409" y="176" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. </tspan>
<tspan x="409" y="195" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"> </tspan>
<tspan x="409" y="214" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">It has appeared in all subsequent browsers </tspan>
<tspan x="409" y="233" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">from Netscape and in all browsers from </tspan>
<tspan x="409" y="252" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Microsoft starting with Internet Explorer </tspan>
<tspan x="409" y="271" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">3.0. The development of this Standard </tspan>
<tspan x="409" y="290" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">started in November 1996. </tspan>
<tspan x="409" y="309" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">The first edition of this Ecma Standard was </tspan>
<tspan x="409" y="328" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">adopted by the Ecma General Assembly of </tspan>
<tspan x="409" y="347" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">June 1997.</tspan>
<tspan x="409" y="366" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="409" y="385" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="409" y="404" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="409" y="423" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">standard ISO/IEC 16262, in April 1998. The </tspan>
<tspan x="409" y="442" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma General Assembly of June 1998 </tspan>
<tspan x="409" y="461" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="409" y="480" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">to keep it fully aligned with ISO/IEC 16262. </tspan>
<tspan x="409" y="499" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Changes between the first and the second </tspan>
<tspan x="409" y="518" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition are editorial in nature.</tspan>
</text>
<rect id="Rectangle" fill="#FFFFFF" opacity="0.6" x="392" y="87" width="307" height="42"></rect>
<g id="np_browser_551045_E8C48F" transform="translate(374.000000, 71.000000)" fill="#E8C48F" fill-rule="nonzero">
<path d="M22.8007131,0 C7.75885978,0 0,8.15688571 0,24 L0,266 C0,281.843114 7.75885978,290 22.8007131,290 L332.145811,290 C347.187664,290 354,282.843114 354,267 L354,24 C354,8.15688571 347.187664,0 332.145811,0 L22.8007131,0 Z M17.3747837,15.2857143 L335.552488,15.2857143 C338.087318,15.2857143 339.739037,17.2978173 339.739037,20.3857143 L338,55.328125 L13.188235,55.328125 L13.188235,20.3857143 C13.188235,17.2978173 14.8399541,15.2857143 17.3747837,15.2857143 Z M38.5340462,29.1428571 C34.6323815,29.1428571 31.4666667,32.4703619 31.4666667,36.5714286 C31.4666667,40.6724953 34.6323815,44.0000001 38.5340462,44.0000001 C42.4357108,44.0000001 45.6014257,40.6724953 45.6014257,36.5714286 C45.6014257,32.4703619 42.4357108,29.1428571 38.5340462,29.1428571 Z M70.0007129,29.1428571 C66.0990482,29.1428571 62.9333333,32.4703619 62.9333333,36.5714286 C62.9333333,40.6724953 66.0990482,44.0000001 70.0007129,44.0000001 C73.9023775,44.0000001 77.0680924,40.6724953 77.0680924,36.5714286 C77.0680924,32.4703619 73.9023775,29.1428571 70.0007129,29.1428571 Z M101.46738,29.1428571 C97.5657149,29.1428571 94.4,32.4703619 94.4,36.5714286 C94.4,40.6724953 97.5657149,44.0000001 101.46738,44.0000001 C105.369044,44.0000001 108.534759,40.6724953 108.534759,36.5714286 C108.534759,32.4703619 105.369044,29.1428571 101.46738,29.1428571 Z M14,71.171875 L338,71.171875 L339.86524,269.547619 C339.86524,272.329898 338.213521,274.142857 335.678691,274.142857 C263.454865,274.142857 209.286995,274.142857 173.175081,274.142857 C138.580838,274.142857 86.6894732,274.142857 17.5009866,274.142857 C14.9661569,274.142857 13.3144379,272.329898 13.3144379,269.547619 L14,71.171875 Z" id="Shape"></path>
</g>
<rect id="Rectangle-2" stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" x="387" y="7" width="326" height="351"></rect>
<rect id="Rectangle-14" fill-opacity="0.8" fill="#FFFFFF" x="395" y="8" width="312" height="61"></rect>
<path id="Line-39" d="M517.5,166 L517.5,7 L519.5,7 L519.5,166 L525.5,166 L518.5,180 L511.5,166 L517.5,166 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-39-Copy-2" d="M530.5,166 L530.5,137 L532.5,137 L532.5,166 L538.5,166 L531.5,180 L524.5,166 L530.5,166 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="525" y="23">pageY</tspan>
</text>
<text id="clientY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="542.4" y="172">clientY</tspan>
</text>
<path id="Line-39-Copy" d="M501,190.5 L389,190.5 L388,190.5 L388,188.5 L501,188.5 L501,182.5 L515,189.5 L501,196.5 L501,190.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="398" y="183">pageX</tspan>
</text>
<text id="clientX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="397.4" y="204">clientX</tspan>
</text>
<text id="😍" font-family="AppleColorEmoji, Apple Color Emoji" font-size="18" font-weight="normal" fill="#5A4739">
<tspan x="514" y="197">😍</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 234 KiB