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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。