无内在尺寸有内在比例SVG效果示意实例页面

展示

代码

• HTML：

  <h4>无内在尺寸有内在比例</h4>
  <div class="svg-nosize"></div>
  <h4>一侧内在尺寸有内在比例</h4>
  <div class="svg-one-size"></div>

• CSS：

  .svg-nosize {
      width: 40px; height: 40px;
      border: solid deepskyblue;
      background: url(../images/triangle.svg);
  }
  .svg-one-size {
      width: 40px; height: 40px;
      border: solid deepskyblue;
      background: url(../images/triangle-one-size.svg);
  }

• SVG：

  <!-- triangle.svg -->
  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
      <path d="M512 0L1024 1024L0 1024Z"/>
  </svg>
  
  <!-- triangle-one-size.svg -->
  <svg width="30" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
      <path d="M512 0L1024 1024L0 1024Z"/>
  </svg>