Question

我只想使用纯JavaScript添加图标。图标在我的网络中是本地的，在html中看起来像这样：

 <svg class="pictogram pictogram-checkmark">

          <use xlink:href="/cdn/svg/v18/svg-icons.svg#checkmark" href="/cdn/svg/v18/svg-icons.svg#checkmark"></use>
      </svg>

我该如何转变呢？

Answer 1

假设您在某个地方有一个根svg元素，用于保存定义（在本例中为第一个svg元素），这是如何创建新的svg元素和use元素以重用路径的方法：

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";
// create a new svg element
let svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttributeNS(null, "viewBox", "0 0 24 24");
// append the new svg element
where.appendChild(svg);
// create a new use element
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, 'xlink:href', '#checkmark');
// append the new svg element to the svg element
svg.appendChild(use);

svg{border:1px solid}
#root{position:absolute;left:-10em;}
#where svg{width:24px; height:24px;}
#where svg use{fill:green;}

<svg id="root" width='0' height='0' viewBox='0 0 24 24'><title>check</title>
    <path id="checkmark" d='M9 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z'></path>
</svg>

<p id="where"></p>

或者，对于复选标记，您可以使用字形：✓：✓或✔：✔

添加svg并在javascript中使用元素

1 个答案: