调整SVG的viewBox为0 0 64 64后图标隐藏问题求助

问题原因 #

你原SVG的viewBox属性为0 0 500 500，说明内部所有路径的坐标数值都是基于500×500的画布尺寸设计的。直接将viewBox改为0 0 64 64，相当于用一个64×64大小的视口，只截取原500×500画布的左上角区域，原图标内容全部落在视口可视范围之外，自然就无法显示。

解决方法 #

方案1：无需修改路径坐标，仅调整渲染尺寸（最省事） #

viewBox的作用是定义画布的坐标范围，和最终渲染的显示尺寸没有绑定关系，直接保留原有viewBox，修改width和height属性即可实现等比缩放，示例代码如下：

<svg height="64px" viewBox="0 0 500 500" width="64px">
  <g>
    <path d="M355.295,269.514L325.36,179h27.68c1.122,0,1.999-0.957,1.862-2.071c-1.032-8.427-8.214-14.929-16.92-14.929h-18.289    l-0.187-0.562L319.327,162h-17.501c-9.415,0-24.68-17-34.095-17H231.89c-9.415,0-24.68,17-34.095,17H179.15l-0.187-0.562    L178.784,162h-16.744c-8.706,0-15.888,6.502-16.92,14.929c-0.136,1.114,0.74,2.071,1.862,2.071h26.38l-28.658,90.584l0.121,0.273    c0.225,9.521,15.766,17.323,34.914,17.323c19.2,0,34.775-7.667,34.918-17.224l0.094-0.471L184.817,179H240v160.947    c-29,1.034-54.235,6.303-59.104,13.938c-0.784,1.229,0.47,2.115,1.928,2.115h134.376c1.458,0,1.7-0.886,0.916-2.115    C313.246,346.25,291,340.981,258,339.947V179h55.906l-28.658,90.584l0.121,0.273c0.225,9.521,15.766,17.323,34.914,17.323    c19.2,0,34.775-7.902,34.918-17.458L355.295,269.514z M156.553,269l22.648-71.214L202.875,269H156.553z M297.096,269    l22.647-71.214L343.417,269H297.096z"/>
  </g>
</svg>

如果需要渲染为其他尺寸，直接修改width和height的值即可，不需要调整其他内容。

方案2：修改为64×64标准viewBox #

如果确实需要把viewBox统一为0 0 64 64的规范，需要将路径所有坐标按比例缩放，缩放比例为64/500=0.128，将path中所有数值乘以0.128即可，调整后代码如下：

<svg height="64px" viewBox="0 0 64 64" width="64px">
  <g>
    <path d="M45.477,34.498L41.646,22.912h3.543c0.144,0,0.256,-0.122,0.238,-0.265c-0.132,-1.079,-1.051,-1.911,-2.166,-1.911h-2.341l-0.024,-0.072L40.874,20.736h-2.24c-1.205,0,-3.159,-2.176,-4.364,-2.176H29.682c-1.205,0,-3.159,2.176,-4.364,2.176h-18.578l-0.024,-0.072L22.884,20.736h-2.143c-1.114,0,-2.034,0.832,-2.166,1.911c-0.017,0.143,0.095,0.265,0.238,0.265h3.377l-3.668,11.595l0.015,0.035c0.029,1.219,2.018,2.217,4.469,2.217c2.458,0,4.451,-0.981,4.469,-2.205l0.012,-0.06L23.657,22.912H30.72v20.601c-3.712,0.132,-6.942,0.807,-7.565,1.784c-0.1,0.157,0.06,0.271,0.247,0.271h17.201c0.187,0,0.218,-0.113,0.117,-0.271c-0.631,-0.987,-3.494,-1.663,-7.697,-1.795V22.912h7.156l-3.668,11.595l0.015,0.035c0.029,1.219,2.018,2.217,4.469,2.217c2.458,0,4.451,-1.011,4.469,-2.235L45.477,34.498zM20.039,34.432l2.899,-9.115L25.968,34.432H20.039zM37.9,34.432l2.899,-9.115L43.957,34.432H37.9z"/>
  </g>
</svg>

如果缩放后图标位置有偏移，可以微调viewBox的前两个参数（x轴偏移、y轴偏移），或者给<g>标签添加transform="translate(x,y)"调整位置即可。

内容的提问来源于stack exchange，提问作者ketan