JavaScript createElement polyline and svg correctly

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

折线也是SVG命名空间下的元素。你也应该在那里使用createElementNS

。

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

与 setAttribute 相同，也使用 setAttributeNS