0

以下 Emojione 演示建议添加描述标签以允许用户复制和粘贴原始 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" />

但是，图像显示为空白。

4

1 回答 1

0

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

根据这个解释，<symbol>精灵文件中的标签除非被<use>子句引用，否则不会渲染。

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

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

但这没有用。

下一个最佳解决方案是在 sprite 文件中使用<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>

（来自以下教程）。

然而，这就是 Safari 变得痛苦的地方。这是 Chris Coyier 在以下 CSS 技巧文章中的演示的结果：

在此处输入图像描述

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

Bear Travis为 Safari提供了一些解决方法<img>，但它们都避开了标签。

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

这是一种耻辱。

这是Sara Soueidan 关于精灵创建技术的精彩文章。它很全面，让我希望我可以使用<svg>带有复制和粘贴支持的内联标签。

于 2017-04-10T13:55:39.883 回答