Fatal编程技术网
  • javascript/
  • 如何使用JavaScript在标记中选择SVG元素？

如何使用JavaScript在标记中选择SVG元素？

javascript html angularjs svg

如何使用JavaScript在标记中选择SVG元素？,javascript,html,angularjs,svg,cross-domain,Javascript,Html,Angularjs,Svg,Cross Domain,在Angular应用程序中，我希望能够使用JavaScript或Angular jqLite选择标记的嵌入式SVG元素 通常，要执行此操作，必须编写类似的内容： // Create <object> element of the SVG var objElement = document.createElement('object'); objElement.setAttribute('type',"image/svg+xml"); // Assume $rootScope.b64

在Angular应用程序中，我希望能够使用JavaScript或Angular jqLite选择标记的嵌入式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);
但是，getSVGDocument返回null，contentDocument返回

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

getSVGDocument似乎已被弃用。您是否尝试过类似document.querySelector'objectsvg'？

我也无法使用类似document.querySelectorsvg的东西来选择svg，即使svg显然已加载到DOM中。结果证明我需要这样做：

var obj = document.querySelector("object");
var svg = obj.contentDocument.querySelector("svg");
显然，主文档和此子文档之间有一个边界，您必须使用contentDocument来弥合分歧。

在访问对象内容之前，您需要等待对象的onload事件触发。如果我将getSVGDocument包含在onload事件中，I get Uncaught SecurityError:未能在“HTMLObjectElement”上执行“getSVGDocument”：阻止了具有源代码的帧http://127.0.0.1:8080 从访问原点为null的帧开始。请求访问的帧具有http协议，被访问的帧具有数据协议。协议必须匹配。这是Chrome吗？我想你会被它的安全模型阻止。你可以试试另一种UAYes，我正在开发Chrome。你是说用户代理吗？我如何切换它的安全模式？Robert的意思是尝试不同的浏览器，比如Firefox。Chrome有一个更严格的安全模型。例如，如果您使用的是file://url，则它不允许执行某些操作。这对我不适用。获取对象没有问题，但是.contentDocument返回null，即使我可以在Chrome devtools元素和控制台窗口中清楚地看到对象下的文档。 
    #document
       <html>
          <head></head>
          <body></body>
       <html>

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