rqrcode生成的二維碼在IE中如何正確的顯示

 在rails中生成二維碼，由於有現成的gem可用，還是很方便的，基本套路這裏就不贅述了，大家有興趣請參考此文

按照文中所述，發現在chrome和ff下一切ok，但是在ie下，二維碼沒有正確的縮放，遍尋網上達人解決方案無果，無奈放棄此方法。

 

但是也不願意使用臨時圖片文件的方法，並且我調用to_img的時候報錯，沒有dark? 方法，還未找到原因。看文檔的時候發現rqrcode有as_svg的方法，請觀察發現其生成的結果去掉xml標記之後就是HTML5 svg標記所需的格式。

"<?xml version=\"1.0\" standalone=\"yes\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:ev=\"http://www.w3.org/2001/xml-events\" width=\"539\" height=\"539\" shape-rendering=\"crispEdges\">\n<rect width=\"11\" height=\"11\" x=\"0\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" height=\"11\" x=\"11\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" height=\"11\" x=\"22\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" height=\"11\" x=\"33\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" ......"

@qr = RQRCode::QRCode.new( "#{punch_in_url(@punch_in_code)}", :size => 8, :level => :h )
@qrcode_str = Base64.encode64( @qr.as_svg )

s=@qr.as_svg;
p=s.index('<svg');    
@svg = s[p..]

通過以上代碼截取後，即可在html中直接顯示svg

<%= @svg.html_safe %>此時

此時發現，不能控制其大小，遂用正則替換svg字符串中的寬度和高度數字

wr = /width="(\d+)"/
hr = /height="(\d+)"/
@svg = @svg.sub(wr, 'width="96"').sub(hr, 'height="96"')

替換後，發現網頁中不是對svg進行了縮放顯示，而是隻顯示了左上角一小塊內容。經在網上搜索發現，需要設置其viewbox屬性，通俗的說viewbox設置取景範圍，width和height設置縮放後的大小。於是修改代碼。

    @svg = s[p..]        
    wr = /width="(\d+)"/
    hr = /height="(\d+)"/
    @svg.match wr
    size = $1.to_i
    
    @svg = @svg.sub(wr,'width="96"').sub(hr,"height=\"96\" viewbox=\"0 0 #{size} #{size}\" ");

代碼中只是取用了width的值，因爲二維碼生成的是正方形，所以沒必要在取高度值。

到此時已經能夠正確縮放大小顯示生成的二維碼了！