Question

非常感谢您花时间阅读本文！所以，这是我的SVG。我已将其直接上传到我的子主题文件夹中，并将其重命名为＆＃34; test.svg.php＆＃34;。我已尝试在没有.php的情况下命名它，以及使用＆＃34; inline＆＃34;在开始。

active

我看到人们谈论用这个函数加载svgs：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    width="256px" 
height="256px" viewBox="0 0 256 256" xml:space="preserve">
<g id="extra">
<path fill-rule="evenodd" clip-rule="evenodd" d="M160.052,250.622c52.437-
48.419,49.47-116.202,19.158-158.051
        c-18.584-25.655-43.479-41.734-74.663-47.401c-31.064-5.645-59.962,0.82-
87.352,18.333c-1.406-20.22,4.644-36.006,19.92-47.86
        C46.139,8.639,56.551,5.53,67.934,5.532c41.745,0.004,83.492-       
0.084,125.236,0.03c28.935,0.079,50.532,21.472,51.213,50.597
        c0.231,9.845,0.051,19.7,0.051,29.549c0.001,37.757,0.057,75.518-
0.029,113.273c-0.041,18.4-7.362,33.176-22.787,43.537
        c-7.544,5.065-15.922,7.986-
25.085,8.076C184.859,250.706,173.184,250.622,160.052,250.622z"/>
<path d="M102.5,216.797c0,5.635-3.111,10.203-6.949,10.203h-
6.602C85.111,227,82,222.432,82,216.797V86.203
C82,80.568,85.111,76,88.949,76h6.602c3.838,0,6.949,4.568,6.949,10.203V216.797z
"/>
<path d="M158.464,141.167c5.635,0,10.203,3.111,10.203,6.949v6.602c0,3.838-
4.568,6.949-10.203,6.949H27.87
c-5.635,0-10.203-3.111-10.203-6.949v-6I .602c0-3.838,4.568-6.949,10.203-
6.949H158.464z"/></g>
</svg>

我不太了解关于这个功能的杰克，或者关于php的一般情况，所以我在10个不同的时间添加了它，我的页面模板略有不同，以10种不同的方式尝试正确使用它

然后，我最后编辑我的html文件以添加以下内容：

<?php get_template_part( 'content', 'extra.svg' ); ?>

我还尝试了此代码的所有可能变体来尝试使其工作。因为我是个白痴，我一直想弄清楚它4天。请帮助我不要浪费我的时间，如果可能的话，让我知道如何让它工作。谢谢！

编辑：我应该说我这样做是因为我想在页面上多次加载一堆图标而我希望它是外部的，因为我读到这是唯一的方法让他们缓存

Answer 1

有关在内部和外部使用SVG的更多信息，请查看此post on CSS Tricks。

内部负载

如果你想用javascript或css悬停效果等操作svg图像，只能这样做。你应该将你的svg重命名为test.svg（最后没有.php）。首先使用所有路径和点来格式化svg文件。

然后在要显示svg的WordPress模板文件中，写下：

include get_stylesheet_directory() . '/test.svg';

或者，如果php块尚未打开，请先添加<?php，然后再添加：

<?php include get_stylesheet_directory() . '/test.svg'; ?>

外部负载

只需在类似代码周围使用图片代码：

<img src="<?php echo get_stylesheet_directory() ?>/test.svg" >

如何使用<use>加载外部svg文件？在WordPress？

1 个答案:

内部负载

外部负载