Svg爲精靈與複製和粘貼支持

Question

以下Emojione演示表明，添加描述標籤，以允許用戶複製並粘貼原來的Unicode字符：

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

然而，在Mac OS（至少）我我無法複製和粘貼鯨魚（在頁面上）。

下面是我想在我的網站的代碼示例的變化：

<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，除非它被<use>子句引用，否則不會呈現精靈文件中的<symbol>標記。

我假設這就是爲什麼Emojione圖標不顯示 - src屬性沒有<use>子句，所以引用的<symbol>標記從不呈現。你要知道，我曾嘗試在<img>標籤的src屬性嵌入聯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克里斯Coyier的演示結果：

任何涉及片段引用（上圖中）在Safari 10.1不起作用。如果我選擇一個適用於Safari的選項，事情就會變得不方便，我必須在瀏覽器/設備上進行更多測試，以確保解決方案能夠正常工作。

熊特拉維斯有一些workarounds爲Safari，但他們所有的步驟<img>標記。

現在，我會堅持使用單獨的svg文件（而不是單個svg精靈）。

這是一個恥辱。

這是來自Sara Soueidan的關於精靈創建技術的awesome article。這是全面的，使我希望我可以使用內嵌<svg>標籤複製和粘貼支持。