Thursday, April 26, 2018

You may move some inline properties for SVG tags out to CSS, but not all of them.

<!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