Question

我正在使用从swf转换器创建的HTML页面。生成的HTML使用SVG图像来创建与swf布局匹配的元素。

然后我尝试在这些svg图像上加载图像，但不幸的是svg图像没有设置高度和宽度，所以它们看起来像这样：

<div class="wlby_5">
    <!-- Start of symbol: element3 -->
    <img src="FlashTemplate_assets/svgblock_2.svg" class="wlby_4"></img>
    <!-- End of symbol: element3 -->
  </div>

当我将图像附加到此图像上时，我无法获得原始高度和宽度来调整我正在加载的图像的大小，因此它会调整大小以匹配原始svg图像。这就是我在新图片中加载的方式：

var imgWidth = $('div[class~="' + obj.name+ '"]').find('img').width()
var imgHeight = $('div[class~="' + obj.name+ '"]').find('img').height();


console.log("width of image", imgWidth);
console.log("height of image", imgHeight);
console.log( $('div[class~="' + obj.name+ '"]').find('img') );

$('div[class~="' + obj.name+ '"]').find('img').attr('src', obj.value);
$('div[class~="' + obj.name+ '"]').find('img').attr('width', imgWidth);
$('div[class~="' + obj.name+ '"]').find('img').attr('height', imgHeight);

所以我试图在div层中获取图像的高度和宽度，但是这些都不可访问，在控制台中它们都设置为0。

如何访问原始svg图像的高度和宽度，以便将其应用到我正在加载的新图像中？

由于

斯蒂芬

Answer 1

在这些情况下，有两种方法可以检索SVG图像的高度/宽度。这两种方法都有效，但我个人更喜欢第一种方法。

选项1

可以使用SVGElement对象的getBBox()方法。这可以检索x和y偏移量，以及宽度和高度。

$('img').getBBox().width  
$('img').getBBox().height

选项2

或者，您可以使用getBoundingClientRect()方法，如下所示：

$('img').getBoundingClientRect().width;

获取未设置高度/宽度的图像的高度/宽度

1 个答案: