JQuery SVG: получить атрибуты внешних загруженных SVG - PullRequest
Новая
       0

JQuery SVG: получить атрибуты внешних загруженных SVG

0 голосов
/ 03 января 2012

Я загружаю внешний svg с плагином 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, но не ширину (200 пикселей) 

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

Как я могу получить значения атрибута svg (с id = 'fig')?

Спасибо

svg загружается с плагином 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, поэтому ширина div-оболочки - не ширина, определенная внутри svg (200px)

1 Ответ

0 голосов
/ 03 января 2012

Если поймаешь #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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...