时间戳

首页 > 解决方案 > JavaScript createElement polyline 和 svg 正确

javascript - JavaScript createElement polyline 和 svg 正确

问题描述

以下是我的 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. 我尝试了以下建议中的建议，但我已经评论了这些行，因为使用它们时，整个divin 没有显示。

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

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

标签： javascriptcsssvgpolyline

解决方案

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

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

和 setAttribute 一样，也使用 setAttributeNS

推荐阅读