JavaScript createElement polyline and svg correctly

Viewed 520

The following is my 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> 

And my 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");

The issue is that my button in not correctly displayed (smaller size) and I think the problem is in above section when I either try to add class to svg or parameters to polyline. I tried the suggestions from the following suggestions, but I have commented those lines because when use them, the entire div in not displayed.

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

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

1 Answers

polyline is also element under SVG namespace. You should also use createElementNS there

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

and same with setAttribute, use also setAttributeNS

Related