Question

我有使用d3js库生成的SVG。 SVG内部是附加图像。我想要做的是获得图像高度，而不是原始高度，但调整大小以适应容器（100％宽度）时的图像高度。

以下是我遇到麻烦的一个例子：

＆＃13;

& 0x0F

＆＃13;

var svg = d3.select(".preview").append("svg")
    .attr({
      width: "100%"
    })


var exampleImage = svg.append("image")
    .attr("xlink:href", "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg")
    .attr({
      class: "example-image",
      width: "100%",
      height: "100%"
    });


var imgWidth = $(".example-image").width();
var imgHeight = $(".example-image").height();

$("h4").html(imgWidth + " x " + imgHeight);

$(document).ready(function() {
  
    $("h3").html(imgWidth + " x " + imgHeight); 
    
    var imgObj = new Image();
    
    imgObj.src = "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg";
    imgObj.onload = function() {
      $("h1").html("original size: " + imgObj.width + " x " + imgObj.height);
    }
}); 
$("h2").html("Need height of resized image appended to svg, NOT original");

＆＃13;

请注意，图像的高度将用于设置整个svg元素的高度。

以下是jsbin中的相同代码段：jsbin

Answer 1

有几种方法可以做你想要的。其中一个是使用getBBox()：

var imgWidth = d3.select(".example-image").node().getBBox().width;
var imgHeight = d3.select(".example-image").node().getBBox().height;

以下是您更改的代码：

var svg = d3.select(".preview").append("svg")
    .attr({
      width: "100%"
    })


var exampleImage = svg.append("image")
    .attr("xlink:href", "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg")
    .attr({
      class: "example-image",
      width: "100%",
      height: "100%"
    });


var imgWidth = d3.select(".example-image").node().getBBox().width;
var imgHeight = d3.select(".example-image").node().getBBox().height;

$("h4").html(imgWidth + " x " + imgHeight);

$(document).ready(function() {
  
    $("h3").html(imgWidth + " x " + imgHeight); 
    
    var imgObj = new Image();
    
    imgObj.src = "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg";
    imgObj.onload = function() {
      $("h1").html("original size: " + imgObj.width + " x " + imgObj.height);
    }
}); 
$("h2").html("Need height of resized image appended to svg, NOT original");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="preview" style="width: 200px; height: auto;"></div>
  
<h4></h4>
<h3></h3>
<h2></h2>
<h1></h1>

PS：这是一个建设性的批评：不混合jQuery和D3。不仅这不必要，而且这可以使事情无声无息。

获得响应式嵌入图像的高度

1 个答案: