如何使用 JavaScript 在标签中选择 SVG 元素<object>？

在我的Angular应用程序中，我希望能够使用JavaScript或Angular jqLite选择<object>标记的嵌入SVG元素。

通常，要进行此操作，必须编写类似于以下内容的内容：

// Create <object> element of the SVG
var objElement = document.createElement('object');
objElement.setAttribute('type',"image/svg+xml");
// Assume $rootScope.b64 contains the base64 data of the SVG
objElement.setAttribute('data', $rootScope.b64);
// Append the <object> inside the DOM's body
angular.element(document.body).append(objElement);
console.log(objElement);
console.log(objElement.getSVGDocument());
console.log(objElement.contentDocument);

在我的控制台中，objElement返回带有<svg>元素及其内容的完整<object>（假设data属性包含完整的base64数据字符串（b64））。

    <object id="svgObject" data="b64" type="image/svg+xml">
          #document
             <svg>
             </svg>
    </object>

但是，getSVGDocument()返回null，contentDocument返回

    #document
       <html>
          <head></head>
          <body></body>
       <html>

为什么我不能检索SVG元素？如何正确获取SVG元素？我已经看了很多文章，但就是找不到<svg>元素。这是否与跨来源政策有关？

我也无法使用document.querySelector("svg")之类的东西来选择SVG，即使SVG已经清楚地加载在DOM中。原来我需要这样做：

var obj = document.querySelector("object");
var svg = obj.contentDocument.querySelector("svg");

显然，主文档和这个子文档之间有一个边界，您必须使用contentDocument来弥合这一鸿沟。

似乎不赞成使用getSVGDocument（）。你试过document.querySelector('object svg')吗？

您看不到对象的原因是，您很可能在加载DOM之前对其进行探测。尝试：

// Create <object> element of the SVG
var objElement = document.createElement('object');
objElement.setAttribute('type',"image/svg+xml");
// Assume $rootScope.b64 contains the base64 data of the SVG
objElement.setAttribute('data', $rootScope.b64);
// Append the <object> inside the DOM's body
angular.element(document.body).append(objElement);
objElement.addEventListener('load', doStuff);
function doStuff() {
  console.log(objElement);
  var svgDoc = getSVGDoc(objElement);
  console.log('svgDoc', svgDoc);
}

function getSVGDoc(element) {
  console.log('getting obj');
  try {
    return element.contentDocument;
  } catch (e) {
    try {
      return element.getSVGDocument();
    } catch (e) {
      console.log('SVG unsupported within this browser');
    }
  }
}

相关内容

最新更新

热门标签：