bug如下:

 {/*数据源管理-mysql图标*/}
<symbol width='46px' height='46px' viewBox='0 0 46 46'>
  <title>数据源管理-mysql图标</title>
  <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
    <g id='icon-private-mysql' transform='translate(-668.000000, -154.000000)'>
      <g id='Group-3' transform='translate(668.000000, 154.000000)'>
        <path d='M5.32907052e-14,0 L42,0 C44.209139,-4.33003142e-15 46,1.790861 46,4 L46,46 L5.32907052e-14,0 Z' id='Rectangle-Copy-10' fill='#FF9F00'></path>
        <path d='M10.1366187,12.8551901 L11.5556187,12.8551901 L14.2946187,19.1471901 L14.3276187,19.1471901 L17.0556187,12.8551901 L18.4746187,12.8551901 L18.4746187,></path>
      </g>
    </g>
  </g>
</symbol>

image.png

解决方案如下:去掉width和height,将id放入symbol属性中,其他不变

 {/*数据源管理-mysql图标*/}
<symbol id='icon-private-mysql' viewBox='0 0 46 46'>
  <title>数据源管理-mysql图标</title>
  <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
    <g transform='translate(-668.000000, -154.000000)'>

原因:
1.去掉width和height,利用viewBox和font-size对图标设置大小
2.由于其他同事对symbol层id做了样式,放在g层不对

使用的定位,父级元素Card的position为relative,子集Iconfont的position为absolute
image.png


云端的日子
66 声望1 粉丝