php - SVG - 定位不起作用

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="" />