stan/jdk-24
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8284288: Use SVG images for FocusSpec.html and Modality.html

Browse Source 
Reviewed-by: prr, serb
This commit is contained in:
Alexey Ivanov 2022-04-06 10:26:52 +00:00
parent e524107a74
commit bbe894fc81
15 changed files with 946 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

173
src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.svg Normal file
View File

@ -0,0 +1,173 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1"
width="500" height="340"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style><![CDATA[
text {
font: 30px 'DejaVu Sans', Verdana, Arial, sans-serif;
fill: #d91c1b;
text-anchor: middle;
dominant-baseline: middle;
}
]]></style>
<path
d="M 75,290 L 300,50 L 450,210
M 225,130 L 300,210
M 150,210 L 225,290"
fill="none"
stroke="#000000"
/>
<circle
id="circleA"
cx="300"
cy="50"
r="30"
fill="#e6e6ff"
stroke="#000000"
stroke-width="1"
/>
<text
x="300"
y="50"
class="centered"
>A</text>
<use
x="-75"
y="80"
xlink:href="#circleA"
/>
<text
x="225"
y="130"
>B</text>
<use
x="75"
y="80"
xlink:href="#circleA"
/>
<text
x="375"
y="130"
>C</text>
<use
x="-150"
y="160"
xlink:href="#circleA"
/>
<text
x="150"
y="210"
>D</text>
<use
x="0"
y="160"
xlink:href="#circleA"
/>
<text
x="300"
y="210"
>E</text>
<use
x="150"
y="160"
xlink:href="#circleA"
/>
<text
x="450"
y="210"
>F</text>
<use
x="-225"
y="240"
xlink:href="#circleA"
/>
<text
x="75"
y="290"
>G</text>
<use
x="-75"
y="240"
xlink:href="#circleA"
/>
<text
x="225"
y="290"
>H</text>
<path
d="M 490,210
C 490,180 460,125 430,90
400,55 360,10 300,10
240,10 148,123 190,165
c 41,42 58,-11 110,-10
52,1 78,62 115,85
37,22 75,17 75,-30
z"
fill="none"
stroke="#0000ff"
stroke-width="4"
/>
<path
d="M 340,235
C 367,188 276,75 225,75
c -51,0 -72,23 -92,50
-20,27 -41,91 -18,120
22,30 70,-15 110,-15
40,0 87,52 115,5
z"
fill="none"
stroke="#00ff00"
stroke-width="4"
/>
<path
d="m 225,330
c 40,0 50,-20 40,-55
-10,-30 -45,-70 -85,-98
-40,-30 -100,35 -125,63
-27,25 -27,90 15,90
42,0 47,-20 80,-20
32,0 34,20 75,20
z"
fill="none"
stroke="#ff0000"
stroke-width="4"
/>
</svg>

20
src/java.desktop/share/classes/java/awt/doc-files/FocusSpec.html
View File

@ -5,7 +5,7 @@
<title>The AWT Focus Subsystem</title>
</head>
<!--
Copyright (c) 2001, 2021, Oracle and/or its affiliates. All rights reserved.
Copyright (c) 2001, 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
@ -180,8 +180,8 @@
descendants.
<p>
Here is an example:<br> <img src="FocusCycle.gif"
alt="Three groups as described below: ABCF BDE and DGH. "><br>
Here is an example:<br> <img src="FocusCycle.svg"
alt="Three groups as described below: ABCF, BDE and DGH.">
<p>Assume the following:
<ul>
@ -626,9 +626,15 @@ InternalFrameFocusTraversalPolicy.
that have or inherit empty InputMaps.
</ol>
<p>
The figure below shows an implicit focus transfer:
<br><img src="ImplicitFocusTransfer.gif" alt="Implicit focus transfer."><br>
The figures below show an implicit focus transfer:
<p id="containerFocus1"><img src="ImplicitFocusTransfer1.svg"
alt="Implicit focus transfer for traversable container."><br>
pic.1
<p id="containerFocus2"><img src="ImplicitFocusTransfer2.svg"
alt="Implicit focus transfer for non-traversable container."><br>
pic.2
<p>
Assume the following:
<ul>
<li><b>A</b>, <b>B</b> and <b>C</b> are components in some window (a container)
@ -639,8 +645,8 @@ Assume the following:
Container in the pic.2.
<li>In such a case a forward traversal will look as follows:
<ul>
<li> pic.1 : <b>A</b> -> <b>R</b> -> <b>B</b> -> <b>C</b>
<li> pic.2 : <b>A</b> -> <b>B</b> -> <b>C</b>
<li> pic.1 : <b>A</b> &rarr; <b>R</b> &rarr; <b>B</b> &rarr; <b>C</b>
<li> pic.2 : <b>A</b> &rarr; <b>B</b> &rarr; <b>C</b>
</ul>
</ul>

BIN
src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

120
src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer1.svg Normal file
View File

@ -0,0 +1,120 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1"
width="370" height="145"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style><![CDATA[
text {
font: 30px 'DejaVu Sans', Verdana, Arial, sans-serif;
fill: #d91c1b;
}
text.centered {
text-anchor: middle;
dominant-baseline: middle;
}
]]></style>
<circle
id="circleA"
cx="40"
cy="90"
r="30"
fill="#e6e6ff"
stroke="#000000"
stroke-width="1"
/>
<text
x="40"
y="90"
class="centered"
>A</text>
<use
x="130"
y="0"
xlink:href="#circleA"
/>
<text
x="170"
y="90"
class="centered"
>B</text>
<use
x="260"
y="0"
xlink:href="#circleA"
/>
<text
x="300"
y="90"
class="centered"
>C</text>
<rect
x="105"
y="40"
width="260"
height="100"
fill="none"
stroke="#d91c1b"
stroke-width="5"
/>
<text
x="101"
y="30"
style="font-weight: bold"
>R</text>
<defs>
<marker
id="arrow"
viewBox="0 0 10 10"
refX="10"
refY="5"
markerWidth="10"
markerHeight="10"
orient="auto">
<path
d="M 0 0 L 10 5 L 0 10"
fill="none"
stroke="#000000"
/>
</marker>
</defs>
<path d="M 40 55 Q 40 20 100 20"
stroke="#000000"
fill="none"
stroke-dasharray="3"
stroke-width="1"
marker-end="url(#arrow)"
/>
<path d="M 125 20 Q 170 20 170 55"
stroke="#000000"
fill="none"
stroke-dasharray="3"
stroke-width="1"
marker-end="url(#arrow)"
/>
</svg>

114
src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer2.svg Normal file
View File

@ -0,0 +1,114 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1"
width="370" height="145"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style><![CDATA[
text {
font: 30px 'DejaVu Sans', Verdana, Arial, sans-serif;
fill: #d91c1b;
}
text.centered {
text-anchor: middle;
dominant-baseline: middle;
}
]]></style>
<circle
id="circleA"
cx="40"
cy="90"
r="30"
fill="#e6e6ff"
stroke="#000000"
stroke-width="1"
/>
<text
x="40"
y="90"
class="centered"
>A</text>
<use
x="130"
y="0"
xlink:href="#circleA"
/>
<text
x="170"
y="90"
class="centered"
>B</text>
<use
x="260"
y="0"
xlink:href="#circleA"
/>
<text
x="300"
y="90"
class="centered"
>C</text>
<rect
x="105"
y="40"
width="260"
height="100"
fill="none"
stroke="#d91c1b"
stroke-width="5"
stroke-dasharray="25 10"
/>
<text
x="101"
y="30"
style="font-weight: bold"
>R</text>
<defs>
<marker
id="arrow"
viewBox="0 0 10 10"
refX="10"
refY="5"
markerWidth="10"
markerHeight="10"
orient="auto">
<path
d="M 0 0 L 10 5 L 0 10"
fill="none"
stroke="#000000"
/>
</marker>
</defs>
<path d="M 40 55 Q 105 40 170 55"
stroke="#000000"
fill="none"
stroke-dasharray="3"
stroke-width="1"
marker-end="url(#arrow)"
/>
</svg>

8
src/java.desktop/share/classes/java/awt/doc-files/Modality.html
View File

@ -387,7 +387,7 @@
same document
</ol>
<p style="float: left; margin-left: 1em">
<img src="modal-example1.gif" alt="Example 1">
<img src="modal-example1.svg" alt="Example 1">
</p>
<h3 style="clear: left">Example 2</h3>
@ -400,7 +400,7 @@
same document
</ol>
<p style="float: left; margin-left: 1em">
<img src="modal-example2.gif" alt="Example 2">
<img src="modal-example2.svg" alt="Example 2">
</p>
<h3 style="clear: left">Example 3</h3>
@ -418,7 +418,7 @@
D<sub>ii</sub> blocks D<sub>i</sub>
</ol>
<p style="float: left; margin-left: 1em">
<img src="modal-example3.gif" alt="Example 3">
<img src="modal-example3.svg" alt="Example 3">
</p>
<h3 style="clear: left">Example 4</h3>
@ -436,7 +436,7 @@
<li>D<sub>i</sub> remains unblocked
</ol>
<p style="float: left; margin-left: 1em">
<img src="modal-example4.gif" alt="Example 4">
<img src="modal-example4.svg" alt="Example 4">
</p>
<br style="clear:both;">
</main>

BIN
src/java.desktop/share/classes/java/awt/doc-files/modal-example1.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

115
src/java.desktop/share/classes/java/awt/doc-files/modal-example1.svg Normal file
View File

@ -0,0 +1,115 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1"
width="140" height="120"
xmlns="http://www.w3.org/2000/svg"
>
<style><![CDATA[
text {
font: 15px 'DejaVu Serif', serif;
fill: #000;
}
text.centered {
text-anchor: middle;
dominant-baseline: middle;
}
tspan {
font-style: italic;
font-size: smaller;
}
ellipse, path {
stroke: #000;
stroke-width: 1;
}
path {
fill: none;
}
path.dashed {
stroke-dasharray: 2;
}
]]></style>
<path
d="M 65 25 L 30 75
M 65 25 L 100 75"
/>
<ellipse
cx="65" cy="25"
rx="18" ry="14"
fill="#990066"
/>
<text
x="65"
y="25"
style="fill: #fff"
class="centered"
>F</text>
<text
x="86"
y="36"
>1</text>
<ellipse
cx="30" cy="75"
rx="18" ry="14"
fill="#00ccff"
/>
<text
x="30"
y="75"
class="centered"
>D<tspan>i</tspan></text>
<text
x="51"
y="86"
>2</text>
<ellipse
cx="100" cy="75"
rx="18" ry="14"
fill="#00ccff"
/>
<text
x="100"
y="75"
class="centered"
>D<tspan>ii</tspan></text>
<text
x="121"
y="86"
>3</text>
<path
d="M 65,5
C 45,5 3,30 3,75
S 50,94 65,94
S 140,120 135,75
S 85,5 65,5"
class="dashed"
/>
</svg>

BIN
src/java.desktop/share/classes/java/awt/doc-files/modal-example2.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

122
src/java.desktop/share/classes/java/awt/doc-files/modal-example2.svg Normal file
View File

@ -0,0 +1,122 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1"
width="100" height="155"
xmlns="http://www.w3.org/2000/svg"
>
<style><![CDATA[
text {
font-size: 15px;
font-family: 'DejaVu Serif', serif;
fill: #000;
}
text.centered {
text-anchor: middle;
dominant-baseline: middle;
}
tspan {
font-style: italic;
font-size: smaller;
}
ellipse, path {
stroke: #000;
stroke-width: 1;
}
path {
fill: none;
}
path.dashed {
stroke-dasharray: 2;
}
]]></style>
<path
d="M 50 25 L 50 75 L 50 125"
/>
<ellipse
cx="50" cy="25"
rx="18" ry="14"
fill="#990066"
/>
<text
x="50"
y="25"
style="fill: #fff"
class="centered"
>F</text>
<text
x="29"
y="36"
text-anchor="end"
>1</text>
<ellipse
cx="50" cy="75"
rx="18" ry="14"
fill="#00ccff"
/>
<text
x="50"
y="75"
class="centered"
>D<tspan>i</tspan></text>
<text
x="29"
y="86"
text-anchor="end"
>2</text>
<text
x="67"
y="64"
>4</text>
<ellipse
cx="50" cy="125"
rx="18" ry="14"
fill="#00ccff"
/>
<text
x="50"
y="125"
class="centered"
>D<tspan>ii</tspan></text>
<text
x="67"
y="114"
>3</text>
<path
d="M 50,5
C 35,5 2,20 2,75
S 30,150 50,150
S 98,135 98,75
S 65,5 50,5"
class="dashed"
/>
</svg>

BIN
src/java.desktop/share/classes/java/awt/doc-files/modal-example3.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

143
src/java.desktop/share/classes/java/awt/doc-files/modal-example3.svg Normal file
View File

@ -0,0 +1,143 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1"
width="140" height="170"
xmlns="http://www.w3.org/2000/svg"
>
<style><![CDATA[
text {
font: 15px 'DejaVu Serif', serif;
fill: #000;
}
text.centered {
text-anchor: middle;
dominant-baseline: middle;
}
tspan {
font-style: italic;
font-size: smaller;
}
ellipse, path {
stroke: #000;
stroke-width: 1;
}
path {
fill: none;
}
path.dashed {
stroke-dasharray: 1 3 1 3 7 3;
}
]]></style>
<path
d="M 75 25 L 40 115
M 75 25 L 90 85 L 105 145"
/>
<ellipse
cx="75" cy="25"
rx="18" ry="14"
fill="#990066"
/>
<text
x="75"
y="25"
style="fill: #fff"
class="centered"
>F</text>
<text
x="54"
y="36"
text-anchor="end"
>1</text>
<ellipse
cx="90" cy="85"
rx="18" ry="14"
fill="#ff5522"
/>
<text
x="90"
y="85"
class="centered"
>D<tspan>i</tspan></text>
<text
x="107"
y="74"
>2</text>
<text
x="70"
y="85"
text-anchor="end"
dominant-baseline="middle"
>5</text>
<ellipse
cx="105" cy="145"
rx="18" ry="14"
fill="#00ccff"
/>
<text
x="105"
y="145"
class="centered"
>D<tspan>ii</tspan></text>
<text
x="85"
y="160"
text-anchor="end"
>3</text>
<ellipse
cx="40" cy="115"
rx="18" ry="14"
fill="#ff9999"
/>
<text
x="40"
y="115"
class="centered"
>D<tspan>iii</tspan></text>
<text
x="20"
y="110"
text-anchor="end"
>4</text>
<path
d="M 75,5
C 40,5 35,25 35,50
S 5,85 5,115
S 40,165 75,165
S 130,175 135,155
S 125,120 125,105
S 140,75 130,55
S 130,5 75,5"
class="dashed"
/>
</svg>

BIN
src/java.desktop/share/classes/java/awt/doc-files/modal-example4.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

142
src/java.desktop/share/classes/java/awt/doc-files/modal-example4.svg Normal file
View File

@ -0,0 +1,142 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
This code is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1"
width="140" height="170"
xmlns="http://www.w3.org/2000/svg"
>
<style><![CDATA[
text {
font: 15px 'DejaVu Serif', serif;
fill: #000;
}
text.centered {
text-anchor: middle;
dominant-baseline: middle;
}
tspan {
font-style: italic;
font-size: smaller;
}
ellipse, path {
stroke: #000;
stroke-width: 1;
}
path {
fill: none;
}
path.dashed {
stroke-dasharray: 1 3 1 3 7 3;
}
]]></style>
<path
d="M 75 25 L 40 115
M 75 25 L 100 85
M 75 25 L 75 145"
/>
<ellipse
cx="75" cy="25"
rx="18" ry="14"
fill="#990066"
/>
<text
x="75"
y="25"
style="fill: #fff"
class="centered"
>F</text>
<text
x="54"
y="36"
text-anchor="end"
>1</text>
<ellipse
cx="40" cy="115"
rx="18" ry="14"
fill="#ff5522"
/>
<text
x="40"
y="115"
class="centered"
>D<tspan>i</tspan></text>
<text
x="20"
y="110"
text-anchor="end"
>2</text>
<ellipse
cx="100" cy="85"
rx="18" ry="14"
fill="#00ccff"
/>
<text
x="100"
y="85"
class="centered"
>D<tspan>ii</tspan></text>
<text
x="117"
y="74"
>3</text>
<ellipse
cx="75" cy="145"
rx="18" ry="14"
fill="#ff9999"
/>
<text
x="75"
y="145"
class="centered"
>D<tspan>iii</tspan></text>
<text
x="95"
y="155"
>4</text>
<text
x="55"
y="155"
text-anchor="end"
>5</text>
<path
d="M 75,5
C 40,5 35,25 35,50
S 5,85 5,115
S 40,165 75,165
S 130,175 135,155
S 125,120 125,105
S 140,75 130,55
S 130,5 75,5"
class="dashed"
/>
</svg>