Question

我的问题是如何使用javascript创建的SVG对象引用SVG文件？到目前为止，我试图做的事情似乎并不起作用

＆＃13;

  var svg = document.getElementById("svg");
	  svg.setAttribute('width', '2048');
	  svg.setAttribute('height', '784'); 

  var background = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	  background.setAttribute('width', '2048');
	  background.setAttribute('height', '784');
	  background.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'myimg.svg');
	  background.setAttribute('x', '0');
	  background.setAttribute('y', '0');	

svg.appendChild(background);

＆＃13;

svg
{
	border-style: solid;
    border-width: 5px;
}

＆＃13;

<body>
	<svg id="svg"></svg>		
</body>

＆＃13;

Answer 1

看一下这段代码

var svgDocument, svg;
var obj=document.createElement('object');
obj.addEventListener('load', function(e) {
    svgDocument = this.contentDocument;
    svg = svgDocument.querySelector('svg');
});
obj.data = 'myimg.svg';
document.body.appendChild(obj);

您创建一个object，其数据设置为您的svg文件。 onload，＆＃34; root＆＃34;元素（svg元素）可以如图所示获得

注意：在svg加载之前，您无法访问contentDocument。

在JavaScript中将SVG文件引用到SVG对象

1 个答案: