為什么 SVG 不會使用 JS 字符串文字傳遞給 HTML？

Question

在下面的代碼片段中，我在頁面上有幾個類。 我已經根據類列表創建了一個數組。 然后，我試圖將字符串文字傳遞給 class。

如果我傳遞一個簡單的字符串（例如“Hello World”），這會很好地工作，但它不適用於 SVG。

任何想法為什么？ 我沒有收到 SVG 的任何錯誤，只是沒有顯示。

這是一個使用簡單 HTML 的示例

 const myClasses = document.getElementsByClassName("myClass"); Array.prototype.forEach.call(myClasses, (myClass)=> { myClass.innerHTML = `<h3>Hello World</h3>`; });

 <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div>

這是另一個使用相同結構的示例，但帶有 SVG

 const myClasses = document.getElementsByClassName("myClass"); Array.prototype.forEach.call(myClasses, (myClass)=> { myClass.innerHTML = ` <svg class="myClass" width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <symbol id="btn-acc" viewBox="0 0 16 11"> <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z" fill="currentColor" /> </symbol> </svg> `; });

 <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div>

Answer 1

 const myClasses = document.querySelectorAll(".myClass"); myClasses.forEach((myClass) => { myClass.innerHTML = ` <svg width="16px" height="11px" viewBox="0 0 16 11" fill="black" xmlns="http://www.w3.org/2000/svg"> <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z" fill="currentColor" /> </svg> `; });

 <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div>