SVG <image>用法及代码示例

SVG 代表可缩放矢量图形。它可以用来制作图形和动画，就像在 HTML 画布中一样。

<image>SVG 元素包含 SVG 文档内的图像。它可以显示光栅图像文件或其他SVG文件。 SVG 软件必须支持的唯一图像格式是 JPEG、PNG 和其他 SVG 文件。

用法:

<image attributes="values" >

属性：

x:x 轴坐标图像的定位。
y:图像的 y 轴坐标定位。
width:图像的宽度。
height：图像的高度。
href:图片来源。
preserveAspectRatio:图像的缩放。
Global Attributes:使用一些全局属性，如核心属性和样式属性等。

示例 1：

HTML


<!DOCTYPE html>
<html>
<body>
    <svg width="200" height="200"
        xmlns="http://www.w3.org/2000/svg">       
        <image
            href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            height="200" width="200"/>
    </svg>
</body>
</html>

输出：

示例 2：更改图像的 x 和 y 坐标。

HTML


<!DOCTYPE html>
<html>
<body>
    <svg width="400" height="400"
        xmlns="http://www.w3.org/2000/svg">       
        <image
            href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            x="100" y="100" />
    </svg>
</body>
</html>

输出：

支持的浏览器：

Chrome 1 及以上版本
边 12 及以上
火狐浏览器1.5及以上版本
Safari 3.1 及以上版本
Internet Explorer 9 及更高版本
Opera 8 及以上版本

相关用法

注：本文由纯净天空筛选整理自taran910大神的英文原创作品 SVG <image> Element。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。