0

HTML テキストとテキストを含む SVG ドキュメントがあり、外部オブジェクトとして含まれています。HTML テキストと SVG ドキュメント内のテキストのサイズを同じに保ちたい。

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>getComputedStyle</title>
</head>

<body>
    <h3 id="headerId">Header</h3>
    <object onload="svgLoaded()" id="sampleSVG" data="sample.svg" 
        type="image/svg+xml" width="80%"></object>
    <script>
        let element = document.getElementById("headerId");
        console.log(window.getComputedStyle(element)
            .getPropertyValue("font-size"));
        console.log(element.getBoundingClientRect().height);
        var svgLoaded = function () {
            svgObject = document.getElementById("sampleSVG");
            var svgObjectIntern = svgObject.contentDocument;
            var textElement = 
               svgObjectIntern.getElementsByTagName('text');
            for (var i = 0; i < textElement.length; i++) {
                let selectedText = textElement[i];
                console.log(window
                    .getComputedStyle(selectedText)
                    .getPropertyValue("font-size"));
                console.log(selectedText.getBoundingClientRect().height);
            }
        }
    </script>
</body>
</html>

SVG ドキュメント内のテキスト サイズの変更は正常に機能しますが (私は d3.js を使用しています)、最初のステップとして、ユーザーに表示されるテキスト サイズが必要です。ブラウザ ウィンドウのサイズを変更するか、SVG オブジェクトの「幅」を変更すると、HTML テキストのサイズは一定のままですが、SVG 内のテキストのサイズは比例して変化します。

ユーザーに表示されるテキスト サイズを測定するために、「getComputedStyle」と「getBoundingClientRect」の両方を試しました。getBoundingClientRect は問題なく動作しますが、getComputedStyle は、スケーリングに関係なく、SVG ドキュメント内で定義されたテキスト サイズを常に教えてくれます。

原則として、「getBoundingClientRect」で問題ありません。唯一の欠点は、これには常に SVG 内に水平テキスト要素が必要であり、これは私のすべての SVG ドキュメントには当てはまらないことです。もちろん、透明な横長のサンプル テキストを紹介することもできます。

私は、それはあまり賢くないと感じています。たぶん、より良い解決策があります。

4

1 に答える 1