<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<style>
section {
color: #FFFFFF;
text-align: center;
display: table-cell;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 10px;
}
</style>
<body>
<svg height="200" width="360">
<circle cx="260" cy="100" r="94" fill="red" />
<circle cx="100" cy="100" r="94" stroke="white" stroke-width="3" fill="blue"
fill-opacity="0.6" />
<circle cx="260" cy="100" r="94" stroke="white" stroke-width="3" fill="none" />
</svg>
<section style="margin-top: -108px; margin-left: 50px;
width: 100px;">liberal</section>
<section style="margin-top: -128px; margin-left: 175px;
width: 10px;">s w i n g</section>
<section style="margin-top: -108px; margin-left: 210px;
width: 100px;">conservative</section>
</body>
</html>
What is above may be refactored like so:
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<style>
.conservative {
fill: red;
}
.conservativeOutline {
stroke: white;
stroke-width: 3;
fill: none;
}
.liberal {
fill: blue;
stroke: white;
stroke-width: 3;
fill-opacity: 0.6;
}
section {
color: #FFFFFF;
text-align: center;
display: table-cell;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 10px;
}
</style>
<body>
<svg height="200" width="360">
<circle class="conservative" cx="260" cy="100" r="94" />
<circle class="liberal" cx="100" cy="100" r="94" />
<circle class="conservativeOutline" cx="260" cy="100" r="94" />
</svg>
<section style="margin-top: -108px; margin-left: 50px;
width: 100px;">liberal</section>
<section style="margin-top: -128px; margin-left: 175px;
width: 10px;">s w i n g</section>
<section style="margin-top: -108px; margin-left: 210px;
width: 100px;">conservative</section>
</body>
</html>
Both files do the same thing!
No comments:
Post a Comment