JavaScript createElement 折线和 svg 正确

Question

以下是我的 HTML：

<div class="product-home-show">
  <div class="seller-round-image">
    <div class="seller-is-online">on</div>
  </div>
  <div class="seller-name">
    sellername
    <div class="verified"></div>
  </div>

  <div class="product-description">
    <span>Product description</span>
    <div
      class="category-product-listed-mini-sign category-product-listed-mini-sign-4"
    ></div>
  </div>

  <div class="listed-game-name">Product name</div>

  <div class="price-game-listed">
    55 EUR
    <span class="arrow-right-price">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-chevron-right chevron-for-payment"
      >
        <polyline points="9 18 15 12 9 6"></polyline>
      </svg>
    </span>
  </div>
</div>

还有我的 JavaScript：

let divProductPriceSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");

// NOT WORKING
// divProductPriceSVG.classList.add("feather feather-chevron-right chevron-for-payment");

divProductPriceSVG.setAttribute("class", "feather feather-chevron-right chevron-for-payment");
divProductPriceSVG.setAttributeNS(null, "viewBox", "0 0 " + 24 + " " + 24);
divProductPriceSVG.setAttributeNS(null, "width", 24);
divProductPriceSVG.setAttributeNS(null, "height", 24);
divProductPriceSVG.setAttributeNS(null, "fill", "none");
divProductPriceSVG.setAttributeNS(null, "stroke-width", 2);
divProductPriceSVG.setAttributeNS(null, "stroke", "currentColor");
divProductPriceSVG.setAttributeNS(null, "stroke-linecap", "round");
divProductPriceSVG.setAttributeNS(null, "stroke-linejoin", "round");

// NOT WORKING
// let divProductPricePolyline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
// divProductPricePolyline.setAttributeNS(null, "points", "9, 18, 15, 12 9, 6");

let divProductPricePolyline = document.createElement("polyline");
divProductPricePolyline.setAttribute("points", "9 18 15 12 9 6");

问题是我的按钮未正确显示（尺寸较小），当我尝试向

svg

添加类或向

polyline

添加参数时，我认为问题出在上面的部分。 我尝试了以下建议中的建议，但我对这些行进行了评论，因为使用它们时，整个

div

不会显示。

https://stackoverflow.com/a/30094369/12051965

https://stackoverflow.com/a/10206416/12051965

Answer 1

polyline 也是 SVG 命名空间下的元素。您还应该在那里使用 createElementNS

document.createElementNS("http://www.w3.org/2000/svg", "polyline");

与setAttribute相同，也使用setAttributeNS