SVG <image>元素

admin發表於2018-11-04
SVG

利用此元素可以引入一張圖片。

功能就如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>元素自行縮放到與引入圖片同等尺寸。

由於演示圖片較大，這裡不再截圖演示，大家自行執行程式碼檢視即可。

相關文章