topExample

by Shital Agarwal

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio -->

<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
  <defs>
     <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
 
  <!-- (width>height) meet -->
  <rect x="0" y="0" width="20" height="10">
    <title>xMidYMid meet</title>
  </rect>
  <svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMid meet" x="0" y="0">
    <use href="#smiley" />
  </svg>
 
  <rect x="25" y="0" width="20" height="10">
    <title>xMinYMid meet</title>
  </rect>
  <svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMinYMid meet" x="25" y="0">
    <use href="#smiley" />
  </svg>
 
  <rect x="50" y="0" width="20" height="10">
    <title>xMaxYMid meet</title>
  </rect>
  <svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMaxYMid meet" x="50" y="0">
    <use href="#smiley" />
  </svg>
 
  <!-- (width>height) slice -->
  <rect x="0" y="15" width="20" height="10">
    <title>xMidYMin slice</title>
  </rect>
  <svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMin slice" x="0" y="15">
    <use href="#smiley" />
  </svg>
 
  <rect x="25" y="15" width="20" height="10">
    <title>xMidYMid slice</title>
  </rect>
  <svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMid slice" x="25" y="15">
    <use href="#smiley" />
  </svg>
 
  <rect x="50" y="15" width="20" height="10">
    <title>xMidYMax slice</title>
  </rect>
  <svg viewBox="0 0 100 100" width="20" height="10"
       preserveAspectRatio="xMidYMax slice" x="50" y="15">
    <use href="#smiley" />
  </svg>
 
  <!-- (width<height) meet -->
  <rect x="75" y="0" width="10" height="25">
    <title>xMidYMin meet</title>
  </rect>
  <svg viewBox="0 0 100 100" width="10"...

CSS

html,body,svg { height:100% }
path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover, rect:active {
  outline: 1px solid red;
}