Я боролся с довольно простой проблемой c, используя селектор jQuery (v 1.12.4) для получения значений атрибутов. Страница HTML содержит элемент svg, для которого я пытаюсь выбрать несколько значений атрибутов:
var svg = $("div.container-fluid > svg").first();
var viewBox = svg.attr("viewBox");
var svgHeight = svg.attr("height");
var svgWidth = svg.attr("width");
var preserveAspectRatio = svg.attr("preserveAspectRatio");
var zoomAndPan = svg.attr("zoomAndPan");
var css = svg.attr("class");
if (typeof(console) != 'undefined') {
console.log("viewBox : " + viewBox + "; height : " + svgHeight + "; width : " + svgWidth + "; preserveAspectRatio : " + preserveAspectRatio + "; zoomAndPan : " + zoomAndPan + "; css class : " + css);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="16.5354in" height="11.6929in" viewBox="0 0 1190.55 841.89"
xml:space="preserve" color-interpolation-filters="sRGB" class="st15" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify" version="1.1" contentScriptType="text/ecmascript" contentStyleType="text/css">
Для атрибутов «высота», «ширина» и «класс» функция .attr () возвращает ожидаемое значение. Однако для «zoomAndPan», «preserveAspectRatio», «viewBox» функция .attr () возвращает «undefined». Отладив Javascript в Chrome, я вижу, что структура svg DOM содержит все ожидаемые атрибуты, поэтому не могу понять, в чем проблема.
Любая помощь или мысли были бы очень признательны.
С уважением, Андрей