Question

我是SVG的新手。我认为有两种方法可以在我的wordpress模板中插入SVG图标。

1：带“使用”

<svg viewBox="0 0 100 100">
    	    <use xlink:href="<?php bloginfo('template_directory'); ?>/icons/download.svg#Layer_1"></use>
    	</svg>

2：作为PHP文件

get_template_part("icons/download")

（在这种情况下，“get_template_part”是指带有绘制SVG的XML代码的“icon.php”文件：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40px" height="33.999px" viewBox="0 0 40 33.999" style="enable-background:new 0 0 40 33.999;" xml:space="preserve">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M39,14h-1v15.999c0,2.209-1.791,4-4,4H6c-2.209,0-4-1.791-4-4V14H1
	c-0.552,0-1-0.448-1-1c0-0.552,0.448-1,1-1h1v-0.001h2v18c0,1.104,0.895,2,2,2h28c1.104,0,2-0.896,2-2v-18h2V12h1
	c0.552,0,1,0.448,1,1C40,13.552,39.552,14,39,14z M20.708,13.706c-0.001,0.001-0.002,0.002-0.003,0.002l-0.009,0.009l0,0l0,0
	c-0.087,0.087-0.189,0.147-0.294,0.196c-0.005,0.002-0.009,0.007-0.014,0.009c-0.369,0.163-0.814,0.098-1.117-0.205l-4.989-4.994
	c-0.394-0.394-0.394-1.033,0-1.427c0.394-0.394,1.032-0.394,1.426,0L19,10.591V1c0-0.552,0.448-1,1-1c0.552,0,1,0.448,1,1v9.56
	l3.261-3.264c0.393-0.394,1.031-0.394,1.425,0s0.394,1.033,0,1.427L20.708,13.706z"/>
</svg>

没有javascript，第一个选项在IE（甚至11！）中不起作用。

第二个选项适用于IE9及以上版本，这很酷！但是我无法定位此SVG。我把它放在一个包装器（“.svg-wrapper”）中并试图用CSS定位它但SVG出现在DOM的包装器之外： - （

我在这里做错了吗？

echo '<li class="alignmiddle"><a href="' . $url . '" class="download cf">' . '<div class="svgwrapper">' . get_template_part("icons/download") . '</div>' . $title . '.' . $path_info['extension'] . '<span class="filesize">&nbsp;(' . $filesize . ')</span>' . '</a></li>';

或者是否有更好的解决方案？

Answer 1

我使用以下代码，允许您为旧版浏览器定义回退。此方法允许您以与普通图像相同的方式应用CSS。由于SVG是基于矢量的，因此您必须指定宽度和高度。

<img src="<?php bloginfo('template_directory'); ?>/img/example.svg" onerror="this.onerror=null; this.src='<?php bloginfo('template_directory'); ?>/img/example.png'" alt="" />

SVG - 定位不起作用

1 个答案: