В HTML можно узнать исходные размеры изображения, используя свойства naturalHeight
и naturalWidth
.Например:
<img
src="img.png"
onload="console.log({width:this.naturalWidth, height:this.naturalHeight});"
/>
Но элемент image
в SVG не имеет этих свойств.Например, следующий код возвращает undefined
для обоих свойств:
<svg xmlns="http://www.w3.org/2000/svg">
<image
xlink:href="img.png"
onload="console.log({width:this.naturalWidth, height:this.naturalHeight});"
/>
</svg>
На данный момент я решил эту проблему с помощью функции, которая загружает изображение в элемент img
HTML с помощью конструктора Image()
:
getRasterSize("img.png", function(size) {
console.log(size);
});
function getRasterSize(rasterURL, callback) {
var newImg = new Image();
newImg.src = rasterURL;
newImg.onload = function() {
var rasterSize = {
width: newImg.naturalWidth,
height: newImg.naturalHeight
};
if (typeof callback !== "undefined") callback(rasterSize);
};
}
Но я хотел бы знать, возможно ли получить исходные размеры изображения непосредственно из элемента SVG image
без предварительной загрузки изображения в элемент HTML img
.