html - 路径和 G 元素进入Wordpress 中的标签

Question

我有一个图标的 SVG 代码，其中一些没有渲染，因为主要元素被自动放入<p>标签中？

正确呈现的 SVG 代码：

<a data-test="click:spotify" href="https://open.spotify.com/track/4tdffd5YR7AKoszZ1KKtR8" target="_blank" rel="noopener noreferrer" aria-label="Listen to I Need by DEFFENLO on Spotify" data-css-fisw11=""><div class="css-1ui5fco"><svg width="36" height="36" viewBox="0 0 45 45"><path style="fill:#1dd069" d="M45.71,23.22a22.5,22.5,0,1,0-6.59,15.91,22.5,22.5,0,0,0,6.59-15.91Z" transform="translate(-0.71 -0.73)"></path><path style="fill:#fff" d="M38.46,16.7a25.43,25.43,0,0,0-2.34-1.21q-1.18-.53-2.44-1A37.88,37.88,0,0,0,27.5,13a46.8,46.8,0,0,0-6.33-.59q-1.3,0-2.6,0t-2.6.16c-.83.08-1.64.17-2.43.29s-1.61.27-2.41.46l-1,.24c-.32.09-.66.18-1,.28A2.44,2.44,0,0,0,8,14.74a2.53,2.53,0,0,0,1.37,3.86,2.46,2.46,0,0,0,.72.1,2.84,2.84,0,0,0,.71-.1l.23-.06c.56-.15,1.11-.3,1.67-.42.86-.19,1.73-.33,2.6-.43s1.77-.18,2.65-.22,1.55-.06,2.32-.05,1.54,0,2.32.08,1.49.11,2.23.2,1.46.19,2.19.32c1.06.19,2.1.41,3.12.69a27.65,27.65,0,0,1,3,1q.75.3,1.46.65c.47.23.94.48,1.42.75a2.58,2.58,0,0,0,1.27.34,2.51,2.51,0,0,0,2.19-1.27,2.57,2.57,0,0,0,.33-1.26v-.06s0-.07,0-.13a3,3,0,0,0-.05-.36,2.45,2.45,0,0,0-.45-1,2.73,2.73,0,0,0-.8-.69Z" transform="translate(-0.71 -0.73)"></path><path style="fill:#fff" d="M29.87,21.55a33.53,33.53,0,0,0-5.77-1.3A34.39,34.39,0,0,0,18.19,20c-.94,0-1.86.11-2.77.22s-1.82.27-2.74.47l-1.11.27-1.08.31A2.08,2.08,0,0,0,9.43,22,2.22,2.22,0,0,0,9,23.23a2.15,2.15,0,0,0,.35,1.25,2.18,2.18,0,0,0,1,.83,2.15,2.15,0,0,0,.78.16,2.51,2.51,0,0,0,.75-.11,24.79,24.79,0,0,1,3.61-.78,28.69,28.69,0,0,1,3.87-.27c1,0,2,0,2.91.14s1.87.22,2.81.4a28.37,28.37,0,0,1,3.54.9A23.34,23.34,0,0,1,32,27.12c.35.18.69.37,1,.57l.38.21a2.25,2.25,0,0,0,1.64.24,2.15,2.15,0,0,0,1.33-1,2.23,2.23,0,0,0,.25-1.67,2.14,2.14,0,0,0-1-1.33h0L35.38,24a25.6,25.6,0,0,0-2.69-1.39,27.9,27.9,0,0,0-2.82-1.07Z" transform="translate(-0.71 -0.73)"></path><path style="fill:#fff" d="M24.13,27.42a30.78,30.78,0,0,0-4.36-.34h0l-.91,0c-.69,0-1.39.07-2,.12-.88.07-1.76.19-2.64.33s-1.75.31-2.61.51l-.22.06h0l-.25.08a1.79,1.79,0,0,0-.92.82A1.88,1.88,0,0,0,10,30.27a1.79,1.79,0,0,0,1.78,1.47l.4,0,.35-.07q1.55-.34,3.12-.56c1-.14,2.09-.23,3.15-.28q1.22,0,2.44,0t2.42.25a21.3,21.3,0,0,1,3.8.93A19.6,19.6,0,0,1,31,33.66h0l.06,0,.36.2a1.84,1.84,0,0,0,1.85-3.14,3.57,3.57,0,0,0-.36-.24l0,0h0a22.77,22.77,0,0,0-2.16-1.14,23.32,23.32,0,0,0-2.27-.9,25.39,25.39,0,0,0-4.26-1Z" transform="translate(-0.71 -0.73)"></path></svg><div class="css-16hnw4">Spotify</div></div></a>

不呈现的 SVG 代码：

<a data-test="click:youtube" href="https://www.youtube.com/watch?v=QqsclUCRCJA" target="_blank" rel="noopener noreferrer" aria-label="Listen to DEFFENLO - I Need by DEFFENLO on YouTube" data-css-fisw11=""><div class="css-1ui5fco"><svg width="36" height="36" viewBox="0 0 45 45"><defs><style>.youtube-icon-circle-1{fill:red;}.youtube-icon-circle-2{fill:#fff;}</style></defs><circle class="youtube-icon-circle-1" cx="22.5" cy="22.5" r="22.5"></circle><path id="lozenge-path" class="youtube-icon-circle-2" d="M37.12,16a3.71,3.71,0,0,0-2.61-2.61C32.2,12.73,23,12.73,23,12.73s-9.24,0-11.55.62A3.71,3.71,0,0,0,8.79,16a38.56,38.56,0,0,0-.62,7.11,38.56,38.56,0,0,0,.62,7.11,3.71,3.71,0,0,0,2.61,2.61c2.31.62,11.55.62,11.55.62s9.24,0,11.55-.62a3.71,3.71,0,0,0,2.61-2.61,38.56,38.56,0,0,0,.62-7.11A38.56,38.56,0,0,0,37.12,16Z" transform="translate(0 -0.58)"></path><polygon id="play-polygon" class="youtube-icon-circle-1" points="20 26.93 27.68 22.5 20 18.07 20 26.93"></polygon></svg><div class="css-16hnw4">YouTube</div></div></a>

相反，它呈现为：

<a data-test="click:youtube" href="https://www.youtube.com/watch?v=QqsclUCRCJA" target="_blank" rel="noopener noreferrer" aria-label="Listen to DEFFENLO - I Need by DEFFENLO on YouTube" data-css-fisw11=""><div class="css-1ui5fco"><svg width="36" height="36" viewBox="0 0 45 45"><defs><style>.youtube-icon-circle-1{fill:red;}.youtube-icon-circle-2{fill:#fff;}</style></defs></svg><p><circle class="youtube-icon-circle-1" cx="22.5" cy="22.5" r="22.5"></circle><path id="lozenge-path" class="youtube-icon-circle-2" d="M37.12,16a3.71,3.71,0,0,0-2.61-2.61C32.2,12.73,23,12.73,23,12.73s-9.24,0-11.55.62A3.71,3.71,0,0,0,8.79,16a38.56,38.56,0,0,0-.62,7.11,38.56,38.56,0,0,0,.62,7.11,3.71,3.71,0,0,0,2.61,2.61c2.31.62,11.55.62,11.55.62s9.24,0,11.55-.62a3.71,3.71,0,0,0,2.61-2.61,38.56,38.56,0,0,0,.62-7.11A38.56,38.56,0,0,0,37.12,16Z" transform="translate(0 -0.58)"></path><polygon id="play-polygon" class="youtube-icon-circle-1" points="20 26.93 27.68 22.5 20 18.07 20 26.93"></polygon></p><div class="css-16hnw4">YouTube</div></div></a>

这是什么原因造成的？我该如何解决？

标签： htmlcsswordpress

Answer 1

尝试添加remove_filter('the_content', 'wpautop');到functions.php