如何使用raw JS在SVG内部的foreignobject中通过id/class来选择HTML元素

SVG在HTML页面的HTML内部被硬编码。 foreignobject中的HTML工作并响应代码编辑器中的直接编辑，但是我不能使用原始JS选择/操作元素的样式。如何使用raw JS在SVG内部的foreignobject中通过id/class来选择HTML元素

<body> 
<div> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgId" version="1.1"> 
     <foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="50" height="50"> 
      <div id="toModify" style="left:10px;"></div> 
     </foreignObject> 
    </svg> 
</div>

document.?????('toModify').style.left = 20 + '像素';

来源

2017-05-05 niki

请提供[MCVE] –

var thing = document.getElementById("toModify") 
 

 
console.log(thing) 
 

 
thing.style.left = 20 + 'px' 
 

 
console.log(thing)

<div> 
 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgId" version="1.1"> 
 
     <foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="50" height="50"> 
 
      <div id="toModify" style="left:10px;"></div> 
 
     </foreignObject> 
 
    </svg> 
 
</div>

我想这是你想要的吗？

来源

2017-05-05 14:18:09 Chris

如何使用raw JS在SVG内部的foreignobject中通过id/class来选择HTML元素

回答

相关问题