JavaScript createElement polyline 和 svg 正确答案

【问题标题】：JavaScript createElement polyline and svg correctlyJavaScript createElement polyline 和 svg 正确
【发布时间】：2020-06-30 20:59:57
【问题描述】：

以下是我的 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

【问题讨论】：

标签： javascript css svg polyline

【解决方案1】：

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

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

和setAttribute一样，也用setAttributeNS

【讨论】：