您的位置:首页> HTML5教程> SVG教程

SVG <image>元素

2018-11-4 00:15| 作者: admin| 查看: 4741| 评论: 0|来自: 蚂蚁部落

利用此元素可以引入一张图片。

功能就如HTML中的<img>标签,使用方式非常简单。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  background-color:dimgrey;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <image x="0" y="0"
    width="200" height="126"
    xlink:href="demo/CSS/img/gamesky.jpg"/>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001638qc6xch2p5554b546.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

使用<image>元素成功引入一张图片,代码分析如下:

(1).x和y属性规定<image>元素的左上角在的坐标。

(2.).width和height规定<image>元素的尺寸,不一定等同于引入图片的尺寸。

(3).xlink:href规定图片的路径。

特别说明:引入图片的尺寸是500x315,上述代码进行了等比例缩放。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  background-color:dimgrey;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <image x="0" y="0"
    width="260" height="126"
    xlink:href="demo/CSS/img/gamesky.jpg"/>
</svg>
</body>
</html>

上面代码将<image>元素的width由200修改为260。

注意,这是修改的<image>元素的宽度,而不是被引入图片的宽度。

由于<image>元素的尺寸发生了改变,那么被引入图片的尺寸也会随之改变。

原则如下:

(1).被引入的图片会进行等比例缩放。

(2).缩放原则是,图片完全显示不被裁切的前提下,高度或者宽度铺满<image>元素。

(3).被引入的图片居中显示。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001723g3spu43sxhxxp864.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是在谷歌开发者工具中查看的效果,与查看CSS样式效果没有区别。

在第一个代码中,由于<image>元素的长宽恰好与引入图片长宽等比例,图片恰好铺满<image>。

如果width属性和height属性值为0,那么<image>元素不会显示,引入图片也不会显示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  background-color:dimgrey;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <image x="0" y="0"
    width="0" height="0"
    xlink:href="demo/CSS/img/gamesky.jpg"/>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001754szcwkycc5adykxjz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码中,引入的图片并没有被显示出来。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  background-color:dimgrey;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <image x="0" y="0"
    xlink:href="demo/CSS/img/gamesky.jpg"/>
</svg>
</body>
</html>

省略width和height属性,引入的图片将原图显示,<image>元素自行缩放到与引入图片同等尺寸。

由于演示图片较大,这里不再截图演示,大家自行运行代码查看即可。


鲜花

握手

雷人

路过

鸡蛋
返回顶部