如何使用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元素

回答

相關問題