Question

我使用svg-plugin加载外部svg

<svg version="1.2" baseProfile="tiny" id="fig" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="200px" height="100px" viewBox="0 0 200 100" overflow="inherit" xml:space="preserve">
<ellipse id="obj" cx="100" cy="50" rx="20" ry="40"/>
</svg>

当加载svg时，我可以获取bbox或boundingClientRect而不是宽度（200px）

var boxW = svg.getElementById('fig').getBBox().width;
var bcrW = svg.getElementById('fig').getBoundingClientRect().width;

如何获取svg的属性值（id ='fig'）？

由于

svg加载了jquery的

myDiv.css( "width", "144px" );
myDiv.css( "height", "72px" );
myDiv.svg({loadURL: "test_01.svg", onLoad: svgLoaded});

和

function svgLoaded( svg ) {
var myWidth = svg.getElementById('fig').getAttributeNS(null, 'width');

myWidth现在为144，因此wrapper-div的宽度不是svg（200px）内定义的宽度

Answer 1

如果您使用

抓住#fig

svg.getElementById('fig');

然后你只需要这样做：

svg.getElementById('fig').getAttributeNS(null, 'width');

编辑：更完整的例子：

<!doctype html>
<html>
<head>
</head>
<body>

<embed src="rect01.svg" type="image/svg+xml"/>

<script>
    var emb, svg, w;

    emb = document.querySelector('embed');

    emb.addEventListener('load', function () {
      svg = emb.getSVGDocument().querySelector('#fig'); // also works with .documentElement
      w   = svg.getAttributeNS(null, 'width');
      console.log(w);
    });
</script>

</body>
</html>

jquery svg：获取外部加载的svg的属性

1 个答案: