在ViewBox大小

Question

我正在使用img-Tag来显示我的用户上传到我的Amazon S3存储桶的SVG图像。

<img src="http://testbucket.s3.amazonaws.com/mysvg.svg" />

问题在于，一旦加载并显示图像，它就不是它的构造尺寸。例如，显示的测试图片的大小为1920x1920px，但其ViewBox为0 0 128 128。但是，我想以ViewBox的大小显示图像。在这种情况下128x128px。

我想出的唯一想法是使用ajax请求下载图像并从svg源解析ViewBox属性。比我调整大小。但是，我不想做任何不必要的http请求，我正在寻找一个解决方案来读取图像ViewBox维度。我可以使用<object>-Tag加载图片，但由于它托管在亚马逊上，我遇到了跨域问题，无法读取svgs源代码。即使将CORS规则添加到我的存储桶中也是如此。

想法？

Answer 1

您可以尝试这种方法：

• 使用Ajax请求下载svg文件。
• 从响应中解析该svg的视图。
• 创建new Image();
• 将图片的src设置为"data:image/svg+xml; charset =utf8,"+encodeURIComponent( ajax响应)。
• 从您抓取第2步的viewBox信息中设置图像 width / height （通过css或其属性）。

这应该适用于<img>中支持svg的所有主要浏览器，并且由于您只是将响应字符串附加到图像src中，您只向Amazon的服务器发出一个请求。< /强>

所以，例如，它可以给你一个像这样的函数：

function viewBoxedImgSVG(container, url){
    //There might be a better way to parse it...
    var parseViewBox = function(data){
        var parsed = data.match(/viewBox="(.*?)."/);
        if(parsed) return parsed[1].split(' ');
        }
    var xhr= new XMLHttpRequest();
    xhr.onload = function(){
        var img = new Image();
        // responseText for IE, but doesn't support SMIL in img tag anyway
        img.src = "data:image/svg+xml; charset=utf8,"+encodeURIComponent(xhr.responseText);
        var vB = parseViewBox(xhr.responseText);
        if(vB){
            img.width = vB[2];
            img.height = vB[3];
            }
        container.appendChild(img);
        }
    xhr.open('GET', url);
    xhr.send();
}

Answer 2

我有几点建议：

1. 我不确定这是否有效 - 一般情况下，还是使用AWS - 但您可以尝试使用“Range”HTTP请求标头执行AJAX请求。这个想法是你只获取SVG文件的前几百个字节。

2. 假设您可以控制上传，可以将尺寸添加到文件名中。 IE浏览器。 “mysvg_128x128.svg”并解析名称中的值。