WordPress内联SVG不会显示，会在可视化编辑器中显示

Question

我试图在Wordpress帖子中插入美国地图的内联SVG。一个测试页面，它被插入到一个HTML块与一些轻CSS在这里:http://thepostrider.com/test-post/

当我在古腾堡编辑器中编辑它时，我可以看到SVG和所有，但在预览/发布什么都没有。如果您检查发布页面上的元素，它显然存在于代码中，但无论如何都无法在帖子中显示它。从历史上看，我已经通过构建自定义页面并将svg插入php文件来解决这个问题，但我现在也需要开始在个人帖子中构建这种东西;所以我想听听你的建议。

Answer 1

仔细看看HTML源代码:

<g id="g5">
<path id="HI" data-info="<div>State: Hawaii</div><div>Capital: Honolulu</div>&#8221;
fill=&#8221;#D3D3D3&#8243; d=&#8221;M407.1,619.3l1.9-3.6l2.3-0.3l0.3,0.8l-2.1,3.1H407.1z M417.3,615.6l6.1,2.6l2.1-0.3l1.6-3.9
l-0.6-3.4l-4.2-0.5l-4,1.8L417.3,615.6z M448,625.6l3.7,5.5l2.4-0.3l1.1-0.5l1.5,1.3l3.7-0.2l1-1.5l-2.9-1.8l-1.9-3.7l-2.1-3.6
l-5.8,2.9L448,625.6z M468.2,634.5l1.3-1.9l4.7,1l0.6-0.5l6.1,0.6l-0.3,1.3l-2.6,1.5l-4.4-0.3L468.2,634.5z M473.5,639.7l1.9,3.9
l3.1-1.1l0.3-1.6l-1.6-2.1l-3.7-0.3V639.7z M480.5,638.5l2.3-2.9l4.7,2.4l4.4,1.1l4.4,2.7v1.9l-3.6,1.8l-4.8,1l-2.4-1.5   L480.5,638.5z
M497.1,654.1l1.6-1.3l3.4,1.6l7.6,3.6l3.4,2.1l1.6,2.4l1.9,4.4l4,2.6l-0.3,1.3l-3.9,3.2l-4.2,1.5l-1.5-0.6l-3.1,1.8
l-2.4,3.2l-2.3,2.9l-1.8-0.2l-3.6-2.6l-0.3-4.5l0.6-2.4l-1.6-5.7l-2.1-1.8l-0.2-2.6l2.3-1l2.1-3.1l0.5-1l-1.6-1.8L497.1,654.1z&#8221;/>
... etc ...

在我看来，Wordpress已经将所有的引号转换为智能引号(”和″)。那没用的。

您最好将SVG文件作为图像上传并以这种方式插入。(你可能需要安装额外的插件，因为Wordpress不允许SVG在默认状态下上传。)

---

顺便说一下，下次你问关于代码或标记的问题时，请创建一个最小的可重复的例子，并将其直接插入到你的问题中。链接到其他网站的代码可能会中断，使您的问题对其他人无用。谢谢。