svg 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"></path>
  </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"></use>
  </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"></use>
  </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"></use>
  </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"></use>
  </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"></use>
  </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"></use>
  </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" height="25" preserveAspectRatio="xMidYMin meet" x="75" y="0">
    <use href="#smiley"></use>
  </svg>
 
  <rect x="90" y="0" width="10" height="25">
    <title>xMidYMid meet</title>
  </rect>
  <svg viewBox="0 0 100 100" width="10" height="25" preserveAspectRatio="xMidYMid meet" x="90" y="0">
    <use href="#smiley"></use>
  </svg>
 
  <rect x="105" y="0" width="10" height="25">
    <title>xMidYMax meet</title>
  </rect>
  <svg viewBox="0 0 100 100" width="10" height="25" preserveAspectRatio="xMidYMax meet" x="105" y="0">
    <use href="#smiley"></use>
  </svg>

  <!-- (width<height) slice -->
  <rect x="120" y="0" width="10" height="25">
    <title>xMinYMid slice</title>
  </rect>
  <svg viewBox="0 0 100 100" width="10" height="25" preserveAspectRatio="xMinYMid slice" x="120" y="0">
    <use href="#smiley"></use>
  </svg>
 
  <rect x="135" y="0" width="10" height="25">
    <title>xMidYMid slice</title>
  </rect>
  <svg viewBox="0 0 100 100" width="10" height="25" preserveAspectRatio="xMidYMid slice" x="135" y="0">
    <use href="#smiley"></use>
  </svg>
 
  <rect x="150" y="0" width="10" height="25">
    <title>xMaxYMid slice</title>
  </rect>
  <svg viewBox="0 0 100 100" width="10" height="25" preserveAspectRatio="xMaxYMid slice" x="150" y="0">
    <use href="#smiley"></use>
  </svg>
 
  <!-- none -->
  <rect x="0" y="30" width="160" height="60">
    <title>none</title>
  </rect>
  <svg viewBox="0 0 100 100" width="160" height="60" preserveAspectRatio="none" x="0" y="30">
    <use href="#smiley"></use>
  </svg>
  
<style type="text/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;
}
</style>

<style><![CDATA[

]]></style>
  
</svg>

 

 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

来源：https://www.cnblogs.com/LcxSummer/p/12539606.html