<path> 使用 DOM 创建时 SVG 在页面中不起作用

Question

我正在使用一个简单的播放图标 SVG，它在创建为字符串时可以正常工作。更新代码以使用 JavaScript 动态创建标签后，SVG 不再显示在页面上。元素都在那里，正确嵌套并具有正确的对应属性，但检查时 SVG 图标显示为 0 x 0。

这是以前创建它们的方式，它起作用了：

function createListItem(colData) {
  return `
<a class="XXXXX__list-item" target="_blank" href="${colData.url}">
<div class="XXXXX__list-icon">
    <div class="XXXXX__svg-container">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
            <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
        </svg>
    </div>
</div>
<div class="XXXXX__label"><p class="XXXXX__song"><b>${colData.songName}</b><br><span class="XXXXX__artist">${colData.artistName}</span></p>
</div>
</a>
`;
}

这是创建相同元素的更新代码：

function svgCreate() {
  const svgNew = document.createElement("svg");
  svgNew.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svgNew.setAttribute("fill", "currentColor");
  svgNew.setAttribute("class", "bi bi-play-fill");
  svgNew.setAttributeNS("http://www.w3.org/2000/svg", "viewBox", "0 0 16 16");
  svgNew.append(pathCreate());
  return svgNew;
}

function pathCreate() {
  const pathNew = document.createElement("path");
  pathNew.setAttribute(
    "d",
    "m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"
  );
  return pathNew;
}

我已经检查并比较了所有字符串，它们是相同的，但是在开发工具中，某些样式似乎从

path[Attributes Style] {d: path(...)}

、

:not(svg) {transform-origin:...}

和

<svg>

父项中丢失，例如：

 svg[Attributes Style] {fill:...}

和

svg:not(:root) {overflow-clip-margin:... and overflow:...}

我是不是对 DOM 做错了什么？请注意，两个版本的代码都写在同一个文件中，因此 HTML 或任何 CSS 样式中的

<script>

标签的顺序没有问题。欢迎任何帮助。谢谢！

Answer 1

当在 CSS 样式规则中为具有

width

类的

div

元素设置

.XXXXX__svg-container

值时，将显示 SVG 图标。下面的代码片段包括@herrstrietzel 评论中列出的代码更新。

let data = [{
  url: "https://www.u2.com",
  songName: "Zoo Station",
  artistName: "U2"
}];

const html = createListItem(data[0]);
document.querySelector("#list-container li:first-of-type")
  .insertAdjacentHTML("afterbegin", html);

function createListItem(colData) {
  return `
<a class="XXXXX__list-item" target="_blank" href="${colData.url}">
<div class="XXXXX__list-icon">
    <div class="XXXXX__svg-container">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
            <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
        </svg>
    </div>
</div>
<div class="XXXXX__label"><p class="XXXXX__song"><b>${colData.songName}</b><br><span class="XXXXX__artist">${colData.artistName}</span></p>
</div>
</a>
`;
}

function svgCreate() {
  // const svgNew = document.createElement("svg");
  const svgNew = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svgNew.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svgNew.setAttribute("fill", "currentColor");
  svgNew.setAttribute("class", "bi bi-play-fill");
  //svgNew.setAttributeNS("http://www.w3.org/2000/svg", "viewBox", "0 0 16 16");
  svgNew.setAttribute("viewBox", "0 0 16 16");
  svgNew.append(pathCreate());
  return svgNew;
}

function pathCreate() {
  const pathNew = document.createElement("path");
  pathNew.setAttribute(
    "d",
    "m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"
  );
  return pathNew;
}

/* Set a width to the container */

.XXXXX__svg-container {
  width: 26px;
}

#list-container {
  list-style: none;
}

#list-container li a {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  width: fit-content;
  align-items: center;
}

<ul id="list-container">
  <li></li>
</ul>