CODEWITHSUNDEEP
javascriptcsssvgpolyline
user12051965
user12051965

Reputation: 147

JavaScript createElement polyline and svg correctly

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

Upvotes: 3

Views: 1173

Answers (1)

farincz
farincz

Reputation: 5173

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

Upvotes: 3

Related Questions