javasciptメモ帳

javascriptに関するメモです。

16

109 views

SVG の <text> は contentEditable をサポートしていない

通常の HTML では contentEditable を使ってテキストを直接編集できますが、SVG の <text> 要素には contentEditable を適用しても編集できません。これは、現在のブラウザが <text> 要素の編集をサポートしていないためです。

しかし、SVG の中に HTML の要素を埋め込む <foreignObject> を使えば、SVG 内でテキストの編集を実現することが可能 です。

<foreignObject> を使ったテキスト編集の実装例

以下のコードは、SVG の円の中に contentEditable なテキストを表示し、クリックして編集できるようにするものです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG でテキストを編集</title>
    <style>
        html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
        svg { width: 100vw; height: 100vh; display: block; }
        .editable-text {
            width: 50px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            background: transparent;
            border: none;
            outline: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <svg id="canvas"></svg>

    <script>
        const width = window.innerWidth;
        const height = window.innerHeight;

        const svg = document.getElementById("canvas");
        svg.setAttribute("width", width);
        svg.setAttribute("height", height);

        const circleGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
        circleGroup.setAttribute("transform", `translate(${width / 2}, ${height / 2})`);
        svg.appendChild(circleGroup);

        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("r", "50");
        circle.setAttribute("fill", "blue");
        circleGroup.appendChild(circle);

        const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
        foreignObject.setAttribute("x", "-25");
        foreignObject.setAttribute("y", "-10");
        foreignObject.setAttribute("width", "50");
        foreignObject.setAttribute("height", "20");
        circleGroup.appendChild(foreignObject);

        const textDiv = document.createElement("div");
        textDiv.setAttribute("contentEditable", "true");
        textDiv.classList.add("editable-text");
        textDiv.textContent = "編集可";
        textDiv.addEventListener("focus", function() {
            textDiv.style.outline = "1px solid white";
        });
        textDiv.addEventListener("blur", function() {
            textDiv.style.outline = "none";
        });
        foreignObject.appendChild(textDiv);
    </script>
</body>
</html>

なぜ <foreignObject> を使うのか？

<foreignObject> を使うと、SVG 内に 通常の HTML の要素を埋め込む ことができます。これにより、

✅ contentEditable を利用したテキスト編集が可能になる。
✅ CSS でスタイルを自由に適用できる。
✅ JavaScript で DOM の操作がしやすくなる。

ただし、<foreignObject> は すべてのブラウザで完全にサポートされているわけではない ため、使用する際には対応状況を確認することが重要です。

まとめ

  • SVG の <text> には contentEditable を直接適用できない。
  • <foreignObject> を使うと、SVG 内で HTML の要素を利用できる。
  • この方法を使えば、SVG 内のテキストを編集可能にできる。

今後、ブラウザが <text> 要素の contentEditable をサポートする可能性もありますが、現時点では <foreignObject> を使うのが実用的な解決策 です。

Page 16 of 16.

前のページ

[添付ファイル]

1.plugin.zip  


お問い合わせ

プロフィール

すぺぺぺ

自己紹介

本サイトの作成者。
プログラムは趣味と勉強を兼ねて、のんびり本サイトを作っています。
フレームワークはdjango。
ChatGPTで自動プログラム作成に取り組み中。

サイト/ブログ

https://www.osumoi-stdio.com/novel/

ツイッター

@darkimpact0626