SVG <foreignObject>用法及代碼示例

SVG代表可縮放矢量圖形。它可以像HTML畫布一樣用於製作圖形和動畫。

SVG的<foreignObject>元素包括來自不同XML名稱空間的元素。這是一個擴展點，允許用戶代理提供圖形渲染函數，超出本規範中定義的函數。

用法:

<foreignObject x = "The x coordinate of the foreignObject"
         y = "The x coordinate of the foreignObject"
         width = "The width of the foreignObject" 
         height = "The height of the foreignObject">
</foreignObject>

屬性：

x = foreignObject的x坐標。
y = foreignObject的x坐標。
width = foreignObject的寬度。
height = foreignObject的高度。

例：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, 
         initial-scale=1.0"> 
</head> 
  
<body> 
    <svg viewBox="500 500 "> 
        <style> 
            div { 
                color:green; 
                font:18px serif; 
                height:100%; 
                overflow:auto; 
                background-color:black; 
            } 
        </style> 
        <foreignObject x="100" y="25" 
            width="160" height="160"> 
            <div> 
                <br><br>GEEKSFORGEEKS<br><br> 
            </div> 
        </foreignObject> 
    </svg> 
</body> 
  
</html>

輸出：

支持的瀏覽器：

Chrome
Edge
Opera
IE瀏覽器
Safari
Firefox

相關用法

注：本文由純淨天空篩選整理自epistler_999大神的英文原創作品 SVG <foreignObject> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。