CSS vector-effect描边不缩放实例页面

展示

代码

• HTML：

  <svg style="display:none;">
    <symbol id="icon-plus" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" />
      <path d="M25 15 L 25 35"/>
      <path d="M15 25 L 35 25"/>
    </symbol>
  </svg>              
  <h4 class="fill">原始图标</h4>
  <p><svg class="icon"><use xlink:href="#icon-plus"></use></svg></p>
  <h4 class="fill">不设置vector-effect同时2倍放大</h4>
  <p><svg class="icon scale2"><use xlink:href="#icon-plus"></use></svg></p>
  <h4 class="fill">设置vector-effect同时2倍放大</h4>
  <p><svg class="icon scale"><use xlink:href="#icon-plus"></use></svg></p>

• CSS：

  .icon {
      width: 50px; height: 50px;
      fill: none;
      stroke-width: 2px;
      stroke: #2486ff;
      stroke-linecap: round;
  }
  .scale2 {
      zoom: 2;
  }
  .scale {
      width: 100px; height: 100px;
  }
  circle, path {
      vector-effect: non-scaling-stroke;
  }
  /* for Firefox */
  @supports not (zoom: 2) {
    .scale2 {
        transform-origin: 0 0;
        transform: scale(2);
        margin-bottom: 50px;
    }
  }