SVG 插入 html - foreignObject

SVG 使用的命名空間和 html 不同，然而和 html 整合良好，和 CSS 也可以互通有無，那麼可以在 html 中插入 SVG 是否也可以在 SVG 中插入 html 呢 ? 想不到還真的可以。一直以來都把 SVG 視為「向量圖檔」，如果 SVG 中可以插入 html 是不是表示 SVG 本身可以當個小型瀏覽器了 ? 無意間看到 SVG 有個有趣的東西叫 foreignObject ，先來一個範例 範例中，在 foreignObject 中放了一個 div 並指定命名空間 <font color="#00f">xmlns="http://www.w3.org/1999/xhtml"</font> 就可以在 SVG 中放 html , 連 input 這種元件都可以 實測結果，在 safari 中，svg 的位置會被固定在上一層座標 (0,0) 的地方，然後 viewBox 也沒作用，所以下面的範例在 svg 外層包了一個 div 並指定 position:absolute 才解決位置的問題，因為 viewBox 沒作用，所以 svg 裡面的圖沒有被放大兩倍。 ``` $mmcode(r1) ``` <div class="mmresult r1"> <div style="position:absolute"> <!-- 為了處理 safari 的支援問題 --> <svg width="300" height="300" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa"> <foreignObject x=10 y=10 width="130" height="130"> <div xmlns="http://www.w3.org/1999/xhtml"> <div style="position:absolute;left:0;top:0;width:100%;height:100%;background-color:#faa"> <p style="background-color:#afa">這是 html，可以自動換行</p> <p style="background-color:#aaf">輸入: <input type="text" style="width:10ch;"></p> </div> </div> </foreignObject> </svg> </div> <div style="height:300px"></div> </div>