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

4
2-ui/1-document/03-dom-navigation/article.md
View file

@ -13,7 +13,7 @@ All operations on the DOM start with the `document` object. From it we can acces
Here's a picture of links that allow for travel between DOM nodes:
![](dom-links.png)
![](dom-links.svg)
Let's discuss them in more detail.
@ -216,7 +216,7 @@ But for many tasks we don't want text or comment nodes. We want to manipulate el
So let's see more navigation links that only take *element nodes* into account:
![](dom-links-elements.png)
![](dom-links-elements.svg)
The links are similar to those given above, just with `Element` word inside:

BIN
2-ui/1-document/03-dom-navigation/dom-links-elements.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

63
2-ui/1-document/03-dom-navigation/dom-links-elements.svg Normal file
View file

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440px" height="316px" viewBox="0 0 440 316" 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>dom-links-elements.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dom-links-elements.svg">
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="129" y="10" width="198" height="28"></rect>
<text id="document.documentEle" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="142.6" y="29">document.documentElement </tspan>
</text>
<text id="Type-something" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="336.9" y="29">&lt;HTML&gt;</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="163" y="78" width="117" height="28"></rect>
<text id="document.body--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="174.2" y="95">document.body </tspan>
</text>
<text id="(if-inside-body)" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="300.9" y="95">(if inside body)</tspan>
</text>
<path d="M14.5,115 L427,115" id="Line-5" stroke="#8A704D" stroke-width="2" stroke-linecap="square"></path>
<text id="parentElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="175" y="172" fill="#8A704D">parent</tspan>
<tspan x="218.2" y="172" fill="#EE6B47">Element</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="180" y="213" width="80" height="28"></rect>
<text id="&lt;DIV&gt;" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="204.191508" y="232">&lt;DIV&gt;</tspan>
</text>
<path id="Line-6" d="M219.5,184.567507 L214.131314,194.111837 L212.388163,193.131314 L220.5,178.710271 L228.611837,193.131314 L226.868686,194.111837 L221.5,184.567507 L221.5,208.5 L219.5,208.5 L219.5,184.567507 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-7" d="M423.932493,225.5 L414.388163,220.131314 L415.368686,218.388163 L429.789729,226.5 L415.368686,234.611837 L414.388163,232.868686 L423.932493,227.5 L266.5,227.5 L266.5,225.5 L423.932493,225.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="nextElementSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="276" y="212" fill="#8A704D">next</tspan>
<tspan x="304.8" y="212" fill="#EE6B47">Element</tspan>
<tspan x="355.2" y="212" fill="#8A704D">Sibling</tspan>
</text>
<path id="Line-8" d="M15.0675066,227.5 L24.6118368,232.868686 L23.6313143,234.611837 L9.21027114,226.5 L23.6313143,218.388163 L24.6118368,220.131314 L15.0675066,225.5 L169,225.5 L169,227.5 L15.0675066,227.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="previousElementSibli" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="6" y="212" fill="#8A704D">previous</tspan>
<tspan x="63.6" y="212" fill="#EE6B47">Element</tspan>
<tspan x="114" y="212" fill="#8A704D">Sibling</tspan>
</text>
<path id="Line" d="M119.63364,284.731951 L130.574131,284.260077 L130.660313,286.258219 L114.129734,286.971199 L122.10455,272.473934 L123.856915,273.437894 L118.578914,283.032671 L174.822277,248.122997 L175.877003,249.822277 L119.63364,284.731951 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M322.986552,283.478964 L317.962163,273.748982 L319.739221,272.831341 L327.330841,287.532895 L310.824666,286.38635 L310.963255,284.391158 L321.887595,285.14998 L268.115014,249.78603 L269.21397,248.115014 L322.986552,283.478964 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="children" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#EE6B47">
<tspan x="188" y="273">children</tspan>
</text>
<text id="firstElementChild--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="43" y="307" fill="#8A704D">first</tspan>
<tspan x="79" y="307" fill="#EE6B47">Element</tspan>
<tspan x="129.4" y="307" fill="#8A704D">Child </tspan>
</text>
<text id="lastElementChild" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="273" y="307" fill="#8A704D">last</tspan>
<tspan x="301.8" y="307" fill="#EE6B47">Element</tspan>
<tspan x="352.2" y="307" fill="#8A704D">Child</tspan>
</text>
<path id="Line-Copy-2" d="M220.5,131.067507 L215.131314,140.611837 L213.388163,139.631314 L221.5,125.210271 L229.611837,139.631314 L227.868686,140.611837 L222.5,131.067507 L222.5,131.5 L220.5,131.5 L220.5,131.067507 Z M222.5,155.5 L220.5,155.5 L220.5,151.5 L222.5,151.5 L222.5,155.5 Z M222.5,149.5 L220.5,149.5 L220.5,145.5 L222.5,145.5 L222.5,149.5 Z M222.5,143.5 L220.5,143.5 L220.5,139.5 L222.5,139.5 L222.5,143.5 Z M222.5,137.5 L220.5,137.5 L220.5,133.5 L222.5,133.5 L222.5,137.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2-Copy" d="M220.5,50.5675066 L215.131314,60.1118368 L213.388163,59.1313143 L221.5,44.7102711 L229.611837,59.1313143 L227.868686,60.1118368 L222.5,50.5675066 L222.5,72.0953973 L220.5,72.0953973 L220.5,50.5675066 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
2-ui/1-document/03-dom-navigation/dom-links.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

59
2-ui/1-document/03-dom-navigation/dom-links.svg Normal file
View file

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="420px" height="388px" viewBox="0 0 420 388" 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>dom-links.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dom-links.svg">
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="150" y="20" width="117" height="28"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="151" y="154" width="117" height="28"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="117" y="87" width="198" height="28"></rect>
<text id="document" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="179.7" y="38">document</tspan>
</text>
<text id="document.documentEle" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="129.6" y="105">document.documentElement </tspan>
</text>
<text id="Type-something" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="324.9" y="105">&lt;HTML&gt;</tspan>
</text>
<text id="document.body--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="164.2" y="173">document.body </tspan>
</text>
<text id="(if-inside-body)" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="283.9" y="173">(if inside body)</tspan>
</text>
<path id="Line" d="M208.5,125.567507 L203.131314,135.111837 L201.388163,134.131314 L209.5,119.710271 L217.611837,134.131314 L215.868686,135.111837 L210.5,125.567507 L210.5,149.352424 L208.5,149.352424 L208.5,125.567507 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M208.5,58.5675066 L203.131314,68.1118368 L201.388163,67.1313143 L209.5,52.7102711 L217.611837,67.1313143 L215.868686,68.1118368 L210.5,58.5675066 L210.5,80.0953973 L208.5,80.0953973 L208.5,58.5675066 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M2.5,191 L415,191" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square"></path>
<text id="parentNode" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="172" y="248">parentNode</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="169" y="289" width="80" height="28"></rect>
<text id="&lt;DIV&gt;" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="192.191508" y="308">&lt;DIV&gt;</tspan>
</text>
<path id="Line" d="M207.5,260.067507 L202.131314,269.611837 L200.388163,268.631314 L208.5,254.210271 L216.611837,268.631314 L214.868686,269.611837 L209.5,260.067507 L209.5,284.5 L207.5,284.5 L207.5,260.067507 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M207.5,206.067507 L202.131314,215.611837 L200.388163,214.631314 L208.5,200.210271 L216.611837,214.631314 L214.868686,215.611837 L209.5,206.067507 L209.5,206.5 L207.5,206.5 L207.5,206.067507 Z M209.5,230.5 L207.5,230.5 L207.5,226.5 L209.5,226.5 L209.5,230.5 Z M209.5,224.5 L207.5,224.5 L207.5,220.5 L209.5,220.5 L209.5,224.5 Z M209.5,218.5 L207.5,218.5 L207.5,214.5 L209.5,214.5 L209.5,218.5 Z M209.5,212.5 L207.5,212.5 L207.5,208.5 L209.5,208.5 L209.5,212.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M364.932493,301.5 L355.388163,296.131314 L356.368686,294.388163 L370.789729,302.5 L356.368686,310.611837 L355.388163,308.868686 L364.932493,303.5 L254.5,303.5 L254.5,301.5 L364.932493,301.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="nextSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="264" y="288">nextSibling</tspan>
</text>
<path id="Line" d="M53.0675066,303.5 L62.6118368,308.868686 L61.6313143,310.611837 L47.2102711,302.5 L61.6313143,294.388163 L62.6118368,296.131314 L53.0675066,301.5 L165.5,301.5 L165.5,303.5 L53.0675066,303.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="previousSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="50" y="288">previousSibling</tspan>
</text>
<path id="Line" d="M107.63364,360.731951 L118.574131,360.260077 L118.660313,362.258219 L102.129734,362.971199 L110.10455,348.473934 L111.856915,349.437894 L106.578914,359.032671 L162.822277,324.122997 L163.877003,325.822277 L107.63364,360.731951 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M310.986552,359.478964 L305.962163,349.748982 L307.739221,348.831341 L315.330841,363.532895 L298.824666,362.38635 L298.963255,360.391158 L309.887595,361.14998 L256.115014,325.78603 L257.21397,324.115014 L310.986552,359.478964 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="childNodes" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="170" y="343">childNodes</tspan>
</text>
<text id="firstChild--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="64" y="379">firstChild </tspan>
</text>
<text id="Type-something" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="279" y="379">lastChild</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
2-ui/1-document/03-dom-navigation/dom-links@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 66 KiB