javascript - 以 ViewBox 大小显示 SVG

Question

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

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

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

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

想法？

Answer 1

你可以试试这个方法:

• 使用 Ajax 请求下载 svg 文件。
• 从响应中解析该 svg 的 View 框。
• 创建 new Image();
• 将图像的 src 设置为 "data:image/svg+xml; charset =utf8,"+encodeURIComponent( ajax 响应 ) .
• 根据您在第 2 步中获取的 viewBox 信息设置图像宽度/高度(通过 css 或其属性)。

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

因此，例如，它可以为您提供如下功能:

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();
}