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的值，因为二维码生成的是正方形，所以没必要在取高度值。

到此时已经能够正确缩放大小显示生成的二维码了！