JavaScript DOM模型

JavaScript 瀏覽器環(huán)境

JavaScript Web API

閱讀(11.4k) 書簽贊(1) 我要糾錯

JavaScript SVG 圖像

2018-07-24 11:53 更新

SVG是“可縮放矢量圖”（Scalable Vector Graphics）的縮寫，是一種描述向量圖形的XML格式的標(biāo)記化語言。也就是說，SVG本質(zhì)上是文本文件，格式采用XML，可以在瀏覽器中顯示出矢量圖像。由于結(jié)構(gòu)是XML格式，使得它可以插入HTML文檔，成為DOM的一部分，然后用JavaScript和CSS進(jìn)行操作。

相比傳統(tǒng)的圖像文件格式（比如JPG和PNG），SVG圖像的優(yōu)勢就是文件體積小，并且放大多少倍都不會失真，因此非常合適用于網(wǎng)頁。

SVG圖像可以用專門的圖像軟件生成。目前，所有主流瀏覽器都支持，對于低于IE 9的瀏覽器，可以使用第三方的polyfills函數(shù)庫。

插入文件

SVG插入網(wǎng)頁的方法有多種，可以直接把SVG代碼寫在HTML網(wǎng)頁里面。

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

SVG代碼也可以寫在一個獨(dú)立文件中，然后用在<img>、<object>、<embed>、<iframe>等標(biāo)簽，以及CSS的background-image屬性，將這個文件插入網(wǎng)頁。

<!-- 方法一 -->
<img src="circle.svg">

<!-- 方法二 -->
<object id="object" data="circle.svg" type="image/svg+xml"></object>

<!-- 方法三 -->
<embed id="embed" src="icon.svg" type="image/svg+xml">

<!-- 方法四 -->
<iframe id="iframe" src="icon.svg"></iframe>

上面是四種在網(wǎng)頁中插入SVG圖像的方式。

此外，SVG文件還可以插入其他DOM元素，比如<div>元素，請看下面的例子（使用了jQuery函數(shù)庫）。

<div id="stage"></div>

<script>
$('#stage').load('icon.svg', function (response) {
  $(this).addClass('svgLoaded');
  if (!response) {
    // 加載失敗的處理代碼
  }
});
</script>

svg格式

SVG文件采用XML格式，就是普通的文本文件。下面是一個例子。

<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

上面的代碼定義了三個圓，cx、cy、r屬性分別為x坐標(biāo)、y坐標(biāo)和半徑。利用class屬性，可以為這些圓指定樣式。

.red {
  fill: red; /* not background-color! */
}

.fancy {
  fill: none;
  stroke: black; /* similar to border-color */
  stroke-width: 3pt; /* similar to border-width */
}

上面代碼中，fill屬性表示填充色，stroke屬性表示描邊色，stroke-width屬性表示邊框?qū)挾取?/p>

除了<circle>標(biāo)簽表示圓，SVG文件還可以使用表示其他形狀的標(biāo)簽。

<svg>
  <!-- 直線 -->
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"/>
  <!-- 矩形 -->
  <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
  <!-- 橢圓 -->
  <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>  <polygon fill="green" stroke="orange" stroke-width="10" points="350, 75  379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon>
  <!-- 多邊形 -->
  <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
  <!-- 路徑 -->
  <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path>
  <!-- 文本 -->
  <text x="250" y="25">Hello World</text>
</svg>

上面代碼中，line、rect、ellipse、polygon和path標(biāo)簽，分別表示線條、矩形、橢圓、多邊形、路徑和文字。

g標(biāo)簽用于將多個形狀組成一組（group）。

<svg width='300' height='180'>
  <g transform='translate(5, 15)'>
    <text x="0" y="0">Howdy!</text>
    <path d="M0,50 L50,0 Q100,0 100,50"
      fill="none" stroke-width="3" stroke="black" />
  </g>
</svg>

SVG文件里面還可以插入圖片文件。

<svg viewBox="0 0 1 1" width="100" height="100">
  <image xlink:href="path/to/image.jpg"
    width="100%" height="100%"
    preserveAspectRatio="xMidYMid slice"/>
</svg>

上面代碼中，viewBox表示長寬比例，這里是1：1（即正方形），第一對width和height表示圖形默認(rèn)的寬和高（CSS代碼可以覆蓋掉這兩個值），xlink:href表示引用圖像的來源，第二對width和height表示圖像占滿整個SVG圖形，preserveAspectRatio等于xMidYMid slice，告訴瀏覽器置中圖片，并且刪去溢出的部分，更多參數(shù)可以參考MDN。

DOM 操作

如果SVG代碼直接寫在HTML網(wǎng)頁之中，它就成為網(wǎng)頁DOM的一部分，可以直接用DOM操作。

<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>

上面代碼插入網(wǎng)頁之后，就可以用CSS定制樣式。

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

然后，可以用JavaScript代碼操作SVG文件。

var mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', function(e) {
  console.log('circle clicked - enlarging');
  mycircle.setAttributeNS(null, 'r', 60);
}, false);

上面代碼指定，如果點(diǎn)擊圖形，就改寫circle元素的r屬性。

JavaScript操作

獲取SVG DOM

如果使用<img>標(biāo)簽插入SVG文件，就無法獲取SVG DOM。使用<object>、<iframe>、<embed>標(biāo)簽，可以獲取SVG DOM。

var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();

由于SVG文件就是一般的XML文件，因此可以用DOM方法，選取頁面元素。

// 改變填充色
document.getElementById('theCircle').style.fill = 'red';

// 改變元素屬性
document
.getElementById('theCircle')
.setAttribute('class', 'changedColors');

// 綁定事件回調(diào)函數(shù)
document
.getElementById('theCircle')
.addEventListener('click', function () {
  console.log('clicked')
});

讀取svg源碼

由于svg文件就是一個XML代碼的文本文件，因此可以通過讀取XML代碼的方式，讀取SVG源碼。

假定網(wǎng)頁中有一個SVG元素。

<div id="svg-container">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="preserve" width="500" height="440"
  >
    <!-- svg code -->
  </svg>
</div>

使用XMLSerializer實(shí)例的serializeToString方法，獲取svg元素的代碼。

var svgString = new XMLSerializer()
  .serializeToString(document.querySelector('svg'));

將svg圖像轉(zhuǎn)為canvas圖像

首先，需要新建一個Image對象，將svg圖像指定到該Image對象的src屬性。

var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);

img.src = url;

然后，當(dāng)圖像加載完成后，再將它繪制到<canvas>元素。

img.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};

實(shí)例

假定我們要將下面的表格畫成圖形。

Date	Amount
2014-01-01	$10
2014-02-01	$20
2014-03-01	$40
2014-04-01	$80

上面的圖形，可以畫成一個坐標(biāo)系，Date作為橫軸，Amount作為縱軸，四行數(shù)據(jù)畫成一個數(shù)據(jù)點(diǎn)。


<svg width="350" height="160">
  <g class="layer" transform="translate(60,10)">
    <circle r="5" cx="0"   cy="105" />
    <circle r="5" cx="90"  cy="90"  />
    <circle r="5" cx="180" cy="60"  />
    <circle r="5" cx="270" cy="0"   />

    <g class="y axis">
      <line x1="0" y1="0" x2="0" y2="120" />
      <text x="-40" y="105" dy="5">$10</text>
      <text x="-40" y="0"   dy="5">$80</text>
    </g>
    <g class="x axis" transform="translate(0, 120)">
      <line x1="0" y1="0" x2="270" y2="0" />
      <text x="-30"   y="20">January 2014</text>
      <text x="240" y="20">April</text>
    </g>
  </g>
</svg>

參考鏈接

Jon McPartland, An introduction to SVG animation
Alexander Goedde, SVG - Super Vector Graphics
Joseph Wegner, Learning SVG
biovisualize, Direct svg to canvas to png conversion
Tyler Sticka, Cropping Image Thumbnails with SVG

以上內(nèi)容是否對您有幫助：

← JavaScript Canvas API

JavaScript 表單 →

寫筆記

我要補(bǔ)充