raw JSを使用してSVG内部でforeignobject内のid/classでHTML要素を選択する方法

SVGはHTMLページのHTML内にハードコードされています。 foreignObjectの中のHTMLはコードエディタの中で直接編集するように働いていますが、raw 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 + 'PX';

出典

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要素を選択する方法

答えて

関連する問題