0

我正在使用从 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 图像的高度和宽度，以便将其应用于我正在加载的新图像？

谢谢

斯蒂芬

4

1 回答 1

1

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

选项1

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

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

选项 2

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

$('img').getBoundingClientRect().width;
于 2012-04-18T09:37:15.350 回答