JavaScript 经典实例：第三版

398

｜

第

15

章

15.2

在网页脚本中访问

SVG

15.2.1

问题

你想使用网页内的脚本修改

SVG

元素的内容。

15.2.2

方案

如果

SVG

直接内嵌在网页中，访问

SVG

元素及其属性的方式与访问普通的网页元

素一样。

const

square = document.getElementById("square");

square.setAttribute("width", "500");

然而，如果是通过

object

元素嵌入页面的外部

SVG

文件，首先要获取外部

SVG

文件的文档对象，然后才能访问

SVG

元素。这里需要检测对象，因为不同浏览器的

处理方式不同。

window.onload =

function

onLoad() {

const

object = document.getElementById('object');

let

svgdoc;

try

{

svgdoc = object.contentDocument;

}

catch

(e) {

try

{

svgdoc = object.getSVGDocument();

}

catch

(err) {

console.log(err, 'SVG in object not supported in this environment');

}

}

if

(!svgdoc)

return

;

const

square = svgdoc.getElementById('square');

square.setAttribute('width', ...