我的 SVG 源代码在 html <code> 标签中不起作用答案

【问题标题】：My SVG source code is not working in html <code> tags我的 SVG 源代码在 html <code> 标签中不起作用
【发布时间】：2020-10-25 09:54:25
【问题描述】：

我需要将我嵌入的 SVG 源代码添加到我的网站之一。下面的例子，

这样用户可以复制我的图标的原始 svg 代码。我试图添加它，但它并没有出现在图片中，而是它给了我图标 - 这是我累了的代码

            <pre ><code class="language-html" data-lang="html">
                <svg xmlns="http://www.w3.org/2000/svg" width="5rem" height="5rem" fill="none"><defs/><g filter="url(#filter0_ddd)"><rect width="38" height="40" x="8" y="4" fill="#fff" rx="5"/></g><g filter="url(#filter1_ddd)"><path fill="#78A0FF" d="M14 11.2c0-1.21503.985-2.2 2.2-2.2h22.6c1.215 0 2.2.98497 2.2 2.2v2.6c0 1.215-.985 2.2-2.2 2.2H16.2c-1.215 0-2.2-.985-2.2-2.2v-2.6z"/></g><g filter="url(#filter2_ddd)"><path fill="#78A0FF" d="M14 22.2c0-1.215.985-2.2 2.2-2.2h22.6c1.215 0 2.2.985 2.2 2.2v14.6c0 1.215-.985 2.2-2.2 2.2H16.2c-1.215 0-2.2-.985-2.2-2.2V22.2z"/></g><defs><filter id="filter0_ddd" width="54" height="56" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0.12 0"/><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0.18 0"/><feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/><feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/></filter><filter id="filter1_ddd" width="43" height="23" x="6" y="5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.12 0"/><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.18 0"/><feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/><feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/></filter><filter id="filter2_ddd" width="43" height="35" x="6" y="16" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.12 0"/><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.18 0"/><feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/><feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/></filter></defs></svg>
            </code></pre>

所以，我获取了引导 SVG 的源代码，看看他们是如何做到的。而且我发现他们的 SVG 源代码与我的不同。也许不知何故，他们已将其转换为在网站上显示 SVG 代码。

          <pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">width</span><span class="o">=</span><span class="s">"1em"</span> <span class="na">height</span><span class="o">=</span><span class="s">"1em"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-bell"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z"</span><span class="p">/&gt;</span>
            <span class="p">&lt;</span><span class="nt">path</span> <span class="na">fill-rule</span><span class="o">=</span><span class="s">"evenodd"</span> <span class="na">d</span><span class="o">=</span><span class="s">"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"</span><span class="p">/&gt;</span>
          <span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span></code></pre>

你会注意到他们经常使用 span 标签。我可以知道如何将我的 SVG 代码转换为类似 bootstraps SVG 源代码的东西，以便在我的网站上显示它作为第一个示例。

【问题讨论】：

标签： html svg frontend

【解决方案1】：

需要几行 javascript 才能使复制到剪贴板 button 可行另外我已经用xmp替换了你的pre标签，你仍然可以使用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>

【讨论】：