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

8
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
View file

@ -6,7 +6,7 @@ Let's dive into more details about events that happen when mouse moves between e
The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves.
![](mouseover-mouseout.png)
![](mouseover-mouseout.svg)
These events are special, because they have a `relatedTarget`.
@ -46,7 +46,7 @@ The browser checks the mouse position from time to time. And if it notices chang
That means that if the visitor is moving the mouse very fast then DOM-elements may be skipped:
![](mouseover-mouseout-over-elems.png)
![](mouseover-mouseout-over-elems.svg)
If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `<div>` (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`.
@ -56,7 +56,7 @@ On the other hand, we should keep in mind that we can't assume that the mouse sl
In particular it's possible that the cursor jumps right inside the middle of the page from out of the window. And `relatedTarget=null`, because it came from "nowhere":
![](mouseover-mouseout-from-outside.png)
![](mouseover-mouseout-from-outside.svg)
<div style="display:none">
In case of a fast move, intermediate elements may trigger no events. But if the mouse enters the element (`mouseover`), when we're guaranteed to have `mouseout` when it leaves it.
@ -76,7 +76,7 @@ Also try to move the pointer over the red `div`, and then move it out quickly do
Imagine -- a mouse pointer entered an element. The `mouseover` triggered. Then the cursor goes into a child element. The interesting fact is that `mouseout` triggers in that case. The cursor is still in the element, but we have a `mouseout` from it!
![](mouseover-to-child.png)
![](mouseover-to-child.svg)
That seems strange, but can be easily explained.

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.7 KiB

35
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440px" height="183px" viewBox="0 0 440 183" 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>mouseover-mouseout-from-outside.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="202" y="57" width="126" height="93"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="126" height="93" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mouseover-mouseout-from-outside.svg">
<use id="Rectangle-10" stroke="#E8C48E" mask="url(#mask-2)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-1"></use>
<g id="noun_69008_cc" transform="translate(171.000000, 8.000000)" fill="#E8C48E">
<path d="M234.020833,169 L4.97916667,169 C2.23066667,169 0,167.09875 0,164.775 L0,4.225 C0,1.90125 2.23066667,0 4.97916667,0 L234.020833,0 C236.759375,0 239,1.90125 239,4.225 L239,164.775 C239,167.09875 236.759375,169 234.020833,169 L234.020833,169 Z M9.95833333,160.55 L229.041667,160.55 L229.041667,8.45 L9.95833333,8.45 L9.95833333,160.55 L9.95833333,160.55 Z" id="Shape"></path>
<path d="M229.041667,42.25 L9.95833333,42.25 C7.20983333,42.25 4.97916667,40.34875 4.97916667,38.025 C4.97916667,35.70125 7.20983333,33.8 9.95833333,33.8 L229.041667,33.8 C231.780208,33.8 234.020833,35.70125 234.020833,38.025 C234.020833,40.34875 231.780208,42.25 229.041667,42.25 L229.041667,42.25 Z" id="Shape"></path>
<path d="M27.9166667,20.9 C27.9166667,23.11 26.1266667,24.9 23.9166667,24.9 C21.7066667,24.9 19.9166667,23.11 19.9166667,20.9 C19.9166667,18.69 21.7066667,16.9 23.9166667,16.9 C26.1266667,16.9 27.9166667,18.69 27.9166667,20.9 L27.9166667,20.9 Z" id="Shape"></path>
<path d="M47.8333333,20.9 C47.8333333,23.11 46.0433333,24.9 43.8333333,24.9 C41.6233333,24.9 39.8333333,23.11 39.8333333,20.9 C39.8333333,18.69 41.6233333,16.9 43.8333333,16.9 C46.0433333,16.9 47.8333333,18.69 47.8333333,20.9 L47.8333333,20.9 Z" id="Shape"></path>
<path d="M67.75,20.9 C67.75,23.11 65.96,24.9 63.75,24.9 C61.54,24.9 59.75,23.11 59.75,20.9 C59.75,18.69 61.54,16.9 63.75,16.9 C65.96,16.9 67.75,18.69 67.75,20.9 L67.75,20.9 Z" id="Shape"></path>
</g>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="232" y="86" width="67" height="34"></rect>
<text id="#TO" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="250.99681" y="109">#TO</tspan>
</text>
<polygon id="Fill-21" fill="#EE6B47" transform="translate(159.000000, 103.646000) scale(-1, 1) translate(-159.000000, -103.646000) " points="223.12832 94.6353921 217.344468 101.853926 105.198001 101.853926 108.348404 94.146 82 103.645409 108.348404 113.146 105.235092 105.438074 217.204218 105.438074 223.12832 112.830378 236 112.830378 228.709332 103.733476 236 94.6353921"></polygon>
<text id="target" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="240" y="80">target</tspan>
</text>
<text id="relatedTarget-=-null" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="1" y="85">relatedTarget = null</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.2 KiB

51
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="508px" height="92px" viewBox="0 0 508 92" 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>mouseover-mouseout-over-elems.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="124" y="31" width="69.0072917" height="52.4511719"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="69.0072917" height="52.4511719" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<rect id="path-3" x="207" y="31" width="69.0072917" height="52.4511719"></rect>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="69.0072917" height="52.4511719" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<rect id="path-5" x="291" y="31" width="69.0072917" height="52.4511719"></rect>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="69.0072917" height="52.4511719" fill="white">
<use xlink:href="#path-5"></use>
</mask>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mouseover-mouseout-over-elems.svg">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="375" y="22" width="88.0136719" height="50.4511719"></rect>
<text id="#TO" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="404.99681" y="53">#TO</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="17" y="22" width="88.0136719" height="50.4511719"></rect>
<text id="#FROM" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="36.3473958" y="53">#FROM</tspan>
</text>
<use id="Rectangle-8" stroke="#E8C48E" mask="url(#mask-2)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-1"></use>
<text id="&lt;DIV&gt;" opacity="0.6" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="138.964095" y="63">&lt;DIV&gt;</tspan>
</text>
<use id="Rectangle-9" stroke="#E8C48E" mask="url(#mask-4)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-3"></use>
<text id="&lt;DIV&gt;-2" opacity="0.6" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="221.964095" y="63">&lt;DIV&gt;</tspan>
</text>
<use id="Rectangle-10" stroke="#E8C48E" mask="url(#mask-6)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-5"></use>
<text id="&lt;DIV&gt;-3" opacity="0.6" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="305.964095" y="63">&lt;DIV&gt;</tspan>
</text>
<polyline id="Fill-21" fill="#EE6B47" transform="translate(247.500000, 47.646000) scale(-1, 1) translate(-247.500000, -47.646000) " points="401 38.6353921 375.340223 38.6353921 363.810075 45.8539263 140.245366 45.8539263 146.525714 38.146 94 47.6454089 146.525714 57.146 140.319306 49.4380737 363.530486 49.4380737 375.340223 56.8303775 401 56.8303775 386.466006 47.7334759 401 38.6353921"></polyline>
<text id="mouseover" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="340" y="17">mouseover</tspan>
</text>
<text id="mouseout" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="75" y="18">mouseout</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5 KiB

22
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="278px" height="92px" viewBox="0 0 278 92" 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>mouseover-mouseout.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mouseover-mouseout.svg">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="95" y="25" width="88.0136719" height="50.4511719"></rect>
<text id="&lt;DIV&gt;" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="118.964095" y="56">&lt;DIV&gt;</tspan>
</text>
<path d="M109,51.8276766 C109,51.8276766 88.1589755,39.0886766 74.3265137,34 C73.990849,36.1044846 73.6561461,38.2078702 73.3204815,40.3112558 C50.6491708,39.1326345 27.6239215,40.8772137 6,45.5449934 C8.76995481,49.733632 11.5399096,53.9217211 14.3098644,58.1098102 C32.5800247,54.1662369 52.0341482,52.6925483 71.1891551,53.6881948 C70.8534905,55.7926793 70.5178258,57.8960649 70.1831229,60 C81.3091081,56.2091804 109,51.8276766 109,51.8276766" id="Fill-55" fill="#EE6B47"></path>
<text id="mouseover" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="21">mouseover</tspan>
</text>
<path d="M268,51.8276766 C268,51.8276766 247.158975,39.0886766 233.326514,34 C232.990849,36.1044846 232.656146,38.2078702 232.320481,40.3112558 C209.649171,39.1326345 186.623921,40.8772137 165,45.5449934 C167.769955,49.733632 170.53991,53.9217211 173.309864,58.1098102 C191.580025,54.1662369 211.034148,52.6925483 230.189155,53.6881948 C229.85349,55.7926793 229.517826,57.8960649 229.183123,60 C240.309108,56.2091804 268,51.8276766 268,51.8276766" id="Fill-56" fill="#EE6B47"></path>
<text id="mouseout" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="193" y="21">mouseout</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.5 KiB

25
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="233px" height="150px" viewBox="0 0 233 150" 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>mouseover-to-child.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mouseover-to-child.svg">
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="13" y="15" width="210" height="115"></rect>
<text id="#FROM" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="18.5136307" y="31">#FROM</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="141" y="65" width="67" height="34"></rect>
<text id="#TO" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="159.99681" y="88">#TO</tspan>
</text>
<path d="M150,83.0279175 C150,83.0279175 134.824497,73.7186483 124.752316,70 C124.5079,71.5378926 124.264184,73.074982 124.019768,74.6120715 C107.511532,73.7507714 90.7455739,75.0256562 75,78.436726 C77.0169574,81.4976542 79.0339148,84.5581808 81.0508721,87.6187075 C94.3543869,84.7368655 108.520011,83.6599391 122.467831,84.3875269 C122.223415,85.9254195 121.978999,87.462509 121.735284,89 C129.836729,86.2297857 150,83.0279175 150,83.0279175" id="Fill-54" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<text id="mouseover" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="138" y="59">mouseover</tspan>
</text>
<text id="mouseout" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="39" y="70">mouseout</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB