时间戳

首页 > 解决方案 > 我的 SVG 源代码在 html 中不起作用 tags

html - 我的 SVG 源代码在 html 中不起作用 tags

问题描述

标签： htmlsvgfrontend

解决方案

javascript为了使复制到剪贴板可行，需要几行代码button另外我已经替换了你的pre标签，xmp你可以在这里使用仍然使用pre标签，没有限制，并且需要一点点css才能使标签具有溢出属性div。

在xmp标签中，您可以放置​​您的svg代码，然后您可以使用此javascript代码，以便您网站的用户可以复制您的代码svg

function CopyToClipboard(containerid) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.select().createTextRange();
    document.execCommand("copy");
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().addRange(range);
    document.execCommand("copy");
  }
}
xmp {
  border: 2px solid black;
  overflow-x: scroll;
}
  <button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
  <div id="div1">
    <xmp><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bell" fill="currentColor"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z" />
        <path fill-rule="evenodd"
          d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
</svg>
    </xmp>
  </div>

推荐阅读