さまざまなサイズの画像をコンテンツ領域にロードしていますが、それらのサイズが比例して変更されるため、画像の特定の 2 つの側面とコンテンツ領域の境界線の間にギャップが生じることがよくあります。
この画像の上部に長方形を重ね、不透明度を調整して、下の背景画像の可視性を変更します。このフィルターを画像のサイズに合わせたいです。
要素の定義方法は次のとおりです。
<td id="svgContentCell">
<svg id="svg" width="1000" height="750" version="1.1" onload="Init()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
onmousedown="onMouseDown(evt)" onmousemove="onMouseMove(evt)" onmouseup="onMouseUp(evt)" >
<image id="background" x="0" y="0" width="100%" height="100%" xlink:href=""></image>
<rect id="filter" x="0" y="0" width="100%" height="100%" fill="rgb(255, 255, 255)" fill-opacity="0"></rect>
</svg>
</td>
これは Javascript では比較的簡単だと思いましたが、background
画像のサイズに関する有用なデータを取得できませんでした。クライアントの幅のプロパティは 0 を返します。
var bg = document.getElementById('background');
var scrollWidth = bg.scrollWidth; // result: 0
var clientWidth = bg.clientWidth; // result: 0
var offsetWidth = bg.offsetWidth; // result: 0
var width = bg.getAttribute("width"); // result: 100%
// edit: BoundingClientRect() returns size of container not the scaled image.
var bg = document.getElementById("background");
var rect = bg.getBoundingClientRect();
var height = rect.height; // result: 750
var width = rect.width; // result: 1000
// I can retrieve the **unscaled** image dimensions like this
var bg = document.getElementById('background');
var address = bg.getAttribute('xlink:href');
var original = new Image();
original.src = address;
var unscaledWidth = original.width;
var unscaledHeight = original.height;
background
要素のサイズをfilter
適切に変更できるように、スケーリングされた画像の実際のピクセル幅と高さを取得する方法を知っている人はいますか?