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>
解决方案如下:去掉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