我正在使用 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
我的桶的规则。
想法?
最佳答案
你可以试试这个方法:
- 使用 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();
}
关于javascript - 以 ViewBox 大小显示 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29836676/