如何在 SharePoint Online 新式页面中的 SVG 图像中获取可单击的 HREF 标记

Question

我希望 SVG 图像上的可单击区域显示在 SharePoint 新式页面上。图像本身呈现良好，但链接根本不呈现。

SVG 文件本身是使用 Markdown 嵌入的。![Click for Map](https://dummy.sharepoint.com/sites/LL/SiteAssets/Map.svg)

<svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" width="517.52" height="238.48" viewBox="0 0 517.52 238.48">
<a href="https://dummy.sharepoint.com/sites/LL" target="_blank"><path id="Dash1" d="M145.3,159.9l-5.11,15.84a12.13,12.13,0,0,1-10.54,8.36v0h92.42l-7.7-24.25Z"/></a>    
</svg>

在Chrome中呈现的SVG文件允许单击图像并打开链接。嵌入在 SharePoint 中的同一文件不会提供链接。

Answer 1

当您将 SVG 作为图像加载时，在这种情况下通过<img>标签，它不是交互式的。这是一般规则，不是特定于 Sharepoint 的。

用作图像的 SVG 具有与光栅图像相同的功能，因此它们可以在相同的情况下使用，而无需特别考虑其安全性和隐私影响。

Answer 2

您可以使用图像映射在 img 标签中制作可点击的 href，如下所示：

<img src="https://www.fnordware.com/superpng/pnggrad16rgb.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="bing" title="bing" href="https://www.bing.com" coords="37,35,363,104" shape="rect">
<area target="_blank" alt="Google" title="" href="https://www.google.com" coords="41,163,365,225" shape="rect">
<area target="_blank" alt="facebook" title="https://www.facebook.com" href="" coords="43,275,365,351" shape="rect">
</map>

对于新式页面，可以通过新式脚本编辑器 Web 部件添加上面的代码片段：

将脚本编辑器 Web 部件添加回 SharePoint 新式体验

参考：

如何在SharePoint Online/2016/2013中制作图像映射和使用