具有复制和粘贴支持的Svg精灵

Question

以下Emojione演示建议添加description标记以允许用户复制并粘贴原始unicode字符：

https://demos.emojione.com/latest/sprites-svg.html

然而，在macOS上（至少）我无法复制和粘贴鲸鱼（在页面上）。

以下是我在网站上尝试的示例代码的变体：

<svg class="emojione">
  <description>&#x1f433;</description>
  <use xlink:href="/images/emojione.sprites.svg#emoji-1f433"></use>
</svg>

我尝试使用img标记做同样的事情：

<img alt="&#x1f433;" src="/images/emojione.sprites.svg#emoji-1f433" />

但是，图像显示为空白。

Answer 1

似乎是最好的跨浏览器解决方案来显示svg图像，因此可以通过<img>标记进行复制和粘贴。

根据此explanation，除非<symbol>子句引用，否则不会呈现精灵文件中的<use>标记。

我假设这就是Emojione图标没有显示的原因 - src属性没有<use>子句，因此引用的<symbol>标记永远不会呈现。请注意，我确实尝试在src标记的<img>属性中嵌入内联svg（上面），如下所示：

<img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8ZGVzY3JpcHRpb24+JiN4MWY0MzM7PC9kZXNjcmlwdGlvbj4NCiAgPHVzZSB4bGluazpocmVmPSIvc3ByaXRlcy9lbW9qaW9uZS5zdmcjZW1vamktMWY0MzMiPjwvdXNlPg0KPC9zdmc+" />

但那没用。

下一个最佳解决方案是在精灵文件中使用<g>标记。与此类似：

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
    <style><![CDATA[
        .sprite { display: none; }
        .sprite:target { display: inline; }
    ]]></style>
</defs>

<g class="sprite" id="circle">
    <ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>

<g class="sprite" id="square">
    <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />
</g>

<g class="sprite" id="triangle">
    <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>

</svg>

（来自以下tutorial）。

然而，这是Safari变得痛苦的地方。这是来自以下CSS技巧post的Chris Coyier演示的结果：

涉及片段引用的任何内容（在上图中）在Safari 10.1中不起作用。如果我选择一个适用于Safari的选项，事情开始变得不方便，我必须在浏览器/设备上进行更多测试，以确保解决方案能够正常运行。

Bear Travis为Safari提供了一些workarounds，但所有这些都在<img>标记旁边。

现在，我将坚持使用单独的svg文件（而不是单个svg精灵）。

这是一种耻辱。

这是Sara Soueidan关于精灵创作技巧的awesome article。它非常全面，我希望我可以使用带有复制和粘贴支持的内联<svg>标记。